{"slug": "artefact-canvas-frame-heberger-vous-meme-la-page-generee", "title": "Artefact, canvas, frame : héberger vous-même la page générée", "summary": "Zerolith, a serverless platform, now lets developers host AI-generated HTML pages directly from functions, giving them a permanent URL, a private SQLite database, and four access-control options (API key, signed URL, public, custom domain). The feature addresses the limitation of AI artifacts like Claude's Artefact, ChatGPT's Canvas, and Dust's Frame, which lack self-hosting capabilities. A live dashboard example using Open-Meteo data is available at demo-dashboard-fn-539b8643bc44462c815a5ad5a423d976.api.zerolith.io.", "body_md": "# Artefact, canvas, frame : héberger vous-même la page générée\n\nUn artefact montre une idée en dix secondes, puis reste dans la conversation. Une fonction rend la même page HTML, avec une URL qui est la vôtre, une base SQLite privée, et quatre façons de choisir qui peut l'ouvrir : clé d'API, URL signée, public, domaine sur mesure.\n\nVous avez sans doute déjà fait ça : décrire un graphique à un assistant, et recevoir dix secondes plus tard une page qui marche, avec ses courbes, ses couleurs et son survol. Chaque éditeur a son nom pour cet objet. C'est un artefact chez Claude, un canvas chez ChatGPT, chez Gemini et dans Le Chat de Mistral, Grok Studio chez xAI, un Lab chez Perplexity, une Frame chez Dust. Tous font très bien la même chose : montrer une idée avant de décider si elle vaut un projet.\n\nPuis vient la question suivante, et elle tue la démo : « tu peux m'envoyer le lien ? »\n\nUn lien, il y en a parfois un. On publie un artefact, on partage une Frame par un lien à jeton, l'app d'un Lab se déploie sur sa propre page. Mais cette page vit chez l'éditeur, dans un bac à sable : les chiffres qu'elle affiche sont ceux qu'on a écrits dedans, elle n'a aucun endroit à elle où écrire, et « qui peut l'ouvrir » se limite à ce que le produit propose, publique ou réservée à votre espace de travail.\n\nLe manque n'est pas dans le rendu, il est dans l'hébergement. Or une fonction sait très bien renvoyer une page, et pas seulement du JSON. Avec, en plus, les trois choses qui manquent à un artefact : une URL qui est la vôtre, une base de données, et une porte dont vous choisissez la serrure.\n\n## Une fonction peut répondre autre chose que du JSON\n\nLe contrat du handler laisse choisir le type de contenu. Un dictionnaire part en `application/json`\n\n,\nune chaîne en `text/plain`\n\n, mais ce sont des défauts, pas des impositions : un `Content-Type`\n\ndans\nles en-têtes les remplace.\n\n``` python\ndef handler(request):\n return 200, \"

Bonjour

\", {\n \"Content-Type\": \"text/html; charset=utf-8\",\n }\n```\n\nC'est tout ce qu'il faut. Déployez, ouvrez l'URL : votre navigateur affiche une page. Pas de bundler,\npas de `npm install`\n\n, pas d'étape de build, pas de serveur statique à côté ; un fichier et une réponse\nHTTP suffisent.\n\nLe même levier sert pour un SVG (`image/svg+xml`\n\n), un flux RSS (`application/rss+xml`\n\n), un `.ics`\n\n, un\nCSV que le navigateur propose d'enregistrer. Une fonction n'est pas condamnée à être une API.\n\n## Le vrai exemple : un tableau de bord avec ses données\n\nUne page statique n'apporte rien de plus qu'un fichier posé quelque part. L'intérêt commence quand la page va chercher ses données au moment où on la charge.\n\nL'exemple ci-dessous interroge open-meteo (aucune clé d'API), calcule la géométrie de deux graphiques,\net renvoie un document autonome. `httpx`\n\nest déjà dans l'image du runtime.\n\nLa fonction tourne, et vous pouvez l'ouvrir tout de suite : [le tableau de bord, en direct](https://demo-dashboard-fn-539b8643bc44462c815a5ad5a423d976.api.zerolith.io/?city=Paris).\nChangez `?city=`\n\n, ajoutez `&format=json`\n\npour les données brutes ; le pied de page vous dit quel pod\nvous a répondu et s'il venait de démarrer à froid. Le handler complet est aussi dans\n[la galerie d'exemples](/docs#examples) de la documentation, avec les autres fonctions publiques.\n\n``` python\nimport httpx\n\ndef fetch(city, days):\n with httpx.Client(timeout=8) as client:\n geo = client.get(\"https://geocoding-api.open-meteo.com/v1/search\",\n params={\"name\": city, \"count\": 1, \"language\": \"fr\"})\n hits = geo.json().get(\"results\") or []\n if not hits:\n return None\n place = hits[0]\n\n forecast = client.get(\"https://api.open-meteo.com/v1/forecast\", params={\n \"latitude\": place[\"latitude\"], \"longitude\": place[\"longitude\"],\n \"current\": \"temperature_2m,apparent_temperature,wind_speed_10m\",\n \"hourly\": \"temperature_2m\",\n \"daily\": \"temperature_2m_max,temperature_2m_min\",\n \"forecast_days\": days, \"timezone\": \"auto\",\n })\n return place, forecast.json()\n```\n\nEt le graphique. Pas de bibliothèque : une courbe SVG est une liste de points transformée en chaîne de caractères, et cette transformation tient en quinze lignes de Python.\n\n``` python\ndef line_chart(points, width=760, height=220):\n pad_l, pad_r, pad_t, pad_b = 44, 16, 18, 34\n temps = [p[\"temp\"] for p in points]\n lo, hi, step = nice_scale(min(temps), max(temps)) # une échelle à valeurs rondes\n plot_w, plot_h = width - pad_l - pad_r, height - pad_t - pad_b\n\n def x_of(i): return pad_l + plot_w * i / max(len(points) - 1, 1)\n def y_of(v): return pad_t + plot_h - plot_h * (v - lo) / (hi - lo)\n\n coords = [(x_of(i), y_of(p[\"temp\"])) for i, p in enumerate(points)]\n path = \" \".join(f\"{'M' if i == 0 else 'L'}{x:.1f},{y:.1f}\"\n for i, (x, y) in enumerate(coords))\n\n return (f''\n f'')\n```\n\nLe handler assemble : quatre tuiles de valeurs courantes, la courbe des vingt-quatre prochaines heures, des barres d'amplitude jour par jour, le CSS et une vingtaine de lignes de JavaScript pour le survol.\n\n```\nHTML = {\"Content-Type\": \"text/html; charset=utf-8\", \"Cache-Control\": \"no-store\"}\n\ndef handler(request):\n city = (request.query.get(\"city\") or \"Paris\").strip()[:80]\n data = fetch(city, 7)\n if data is None:\n return 404, page_introuvable(city), HTML\n if request.query.get(\"format\") == \"json\":\n return 200, data # les mêmes données, brutes\n return 200, page(data), HTML\n```\n\nDeux détails qui comptent plus qu'ils n'en ont l'air.\n\n**Les graphiques sont déjà dessinés quand la page arrive.** Le SVG est dans le HTML, pas construit par\ndu JavaScript au chargement. Il n'y a donc ni écran de chargement, ni saut de mise en page, ni page\nblanche si un script échoue ; le JavaScript n'ajoute que l'infobulle au survol. Un crawler, un lecteur\nd'écran ou un `curl`\n\nvoient le même contenu que vous.\n\n**La même fonction sert la page et les données.** `?format=json`\n\nrenvoie le dictionnaire brut. Ce\nn'est pas une coquetterie : c'est ce qui fait que le tableau de bord n'est pas un cul-de-sac le jour\noù quelqu'un veut brancher autre chose dessus.\n\n## Ce que ça coûte\n\nDessiner les graphiques sur le serveur ne coûte rien de mesurable : un SVG est une chaîne de caractères, et l'assemblage des 15 Ko de la page disparaît devant l'appel à l'API tierce. Les sortir du serveur pour les faire dessiner par le navigateur ne ferait donc rien gagner, au prix d'un bundle à charger.\n\nCôté facture, `small`\n\nréserve 0,125 Gio et 0,1 vCPU, aux tarifs publics de **0,000004 €/Gio-seconde**\net **0,0000125 €/vCPU-seconde** :\n\n```\nmémoire 0,125 Gio × 0,000004 € = 0,0000005 €/s\nprocesseur 0,1 vCPU × 0,0000125 € = 0,00000125 €/s\n ────────────────\n 0,00000175 €/s\n```\n\nEt là, comme pour [un cron](/blog/cron-serverless), il faut compter honnêtement : vous ne payez pas la\nseule durée du handler. Un pod ne s'éteint pas dès la réponse envoyée. L'autoscaler observe une\nfenêtre de stabilité (60 s par défaut) puis laisse un délai de grâce, si bien qu'une visite isolée\ncoûte de l'ordre de 90 secondes de pod, soit **0,00016 €**.\n\nC'est la mauvaise nouvelle et la bonne à la fois : un tableau de bord regardé une fois par jour coûte un demi-centime par mois, et un tableau de bord consulté vingt fois dans l'après-midi ne coûte presque rien de plus, parce que les vingt visites tiennent dans le même pod. Le pire cas est la visite solitaire, pas l'affluence.\n\n## Trois pièges, payés en le faisant\n\n**Échapper tout ce qui vient de la requête.** Le nom de ville arrive du client et finit dans le HTML.\nSans `html.escape`\n\n, `?city=