Hololive EN — AI Text RPG
Solo
Overview
My first WebLLM project: an interactive text RPG running a language model entirely in the browser. You pick a Hololive EN character, give a story prompt, then make choices that shape the narrative, with a dice roll deciding whether each action succeeds.
Tech and highlights
- WebLLM, an in-browser LLM for dynamic story generation, with no server and no API key.
- React, TypeScript and Tailwind CSS, bundled with Vite.
- Character selection, choice-driven plot, and an adventure-history log, all client-side.
The character does more than change a name. Your pick, “a shark from Atlantis” or “Death’s apprentice”, is what conditions the model, so the same starting prompt produces a different story depending on who you took.
🎮 Play it: majestic-bubblegum-97f279.netlify.app
Fair warning: the model downloads into your browser on first run, so the opening screen takes a while. That is the trade. Nothing you type ever leaves your machine, and there is no API bill behind the story.
Überblick
Mein erstes WebLLM-Projekt: ein Text-RPG, das ein Sprachmodell vollständig im Browser laufen lässt. Du wählst eine Hololive-EN-Figur, gibst einen Story-Prompt und triffst dann Entscheidungen, die die Erzählung formen. Ein Würfelwurf entscheidet, ob eine Aktion gelingt.
Technik und Besonderheiten
- WebLLM, ein LLM im Browser für die Story-Generierung, ohne Server und ohne API-Key.
- React, TypeScript und Tailwind CSS, gebündelt mit Vite.
- Figurenauswahl, verzweigende Handlung und ein Abenteuer-Logbuch, alles clientseitig.
Die Figur ändert mehr als einen Namen. Deine Wahl, „ein Hai aus Atlantis“ oder „die Lehrlingin des Todes“, konditioniert das Modell: derselbe Start-Prompt ergibt je nach Figur eine andere Geschichte.
🎮 Spielen: majestic-bubblegum-97f279.netlify.app
Ein ehrlicher Hinweis: Das Modell wird beim ersten Start in den Browser geladen, der Startbildschirm braucht also einen Moment. Das ist der Preis. Nichts, was du tippst, verlässt deinen Rechner, und hinter der Geschichte steht keine API-Rechnung.
Vue d’ensemble
Mon premier projet WebLLM : un RPG textuel qui fait tourner un modèle de langage entièrement dans le navigateur. Tu choisis un personnage d’Hololive EN, tu donnes une amorce d’histoire, puis tu fais des choix qui orientent le récit, avec un jet de dé qui décide si chaque action réussit.
Technique et points clés
- WebLLM, un LLM embarqué dans le navigateur pour générer l’histoire, sans serveur ni clé d’API.
- React, TypeScript et Tailwind CSS, bundlés avec Vite.
- Sélection de personnage, intrigue à embranchements et journal d’aventure, le tout côté client.
Le personnage fait plus que changer un nom. Ton choix, « un requin venu de l’Atlantide » ou « l’apprentie de la Mort », est ce qui conditionne le modèle : la même amorce produit une histoire différente selon qui tu as pris.
🎮 Jouer : majestic-bubblegum-97f279.netlify.app
Un avertissement honnête : le modèle se télécharge dans ton navigateur au premier lancement, donc l’écran d’accueil met un moment. C’est le prix à payer. Rien de ce que tu écris ne quitte ta machine, et il n’y a aucune facture d’API derrière l’histoire.
概要
はじめての WebLLM プロジェクトです。言語モデルを完全にブラウザ内で動かすテキスト RPG で、ホロライブ EN のキャラクターを選び、物語の書き出しを与え、そのあとは選択で話を動かしていきます。行動の成否はダイスロールで決まります。
技術と特徴
- WebLLM。サーバーも API キーも使わずに物語を生成するブラウザ内 LLM。
- React、TypeScript、Tailwind CSS、バンドルは Vite。
- キャラクター選択、分岐する物語、冒険の履歴ログ。すべてクライアント側で完結します。
キャラクターは名前が変わるだけではありません。「アトランティスから来たサメ」なのか「死神の弟子」なのか、その選択がモデルの前提そのものを変えるので、同じ書き出しでも誰を選んだかで別の話になります。
🎮 プレイする： majestic-bubblegum-97f279.netlify.app
正直に書いておくと、初回はモデルをブラウザにダウンロードするため、最初の画面が出るまで時間がかかります。そのぶんの見返りとして、入力した内容が端末から出ていくことはなく、物語の裏側に API 課金も発生しません。
概览
我的第一个 WebLLM 项目：一款完全在浏览器里跑语言模型的文字 RPG。你挑一位 Hololive EN 角色，给出故事开头，然后用选择推动剧情，每次行动是否成功由掷骰决定。
技术与要点
- WebLLM，运行在浏览器内的 LLM，用来动态生成故事，无需服务器和 API 密钥。
- React、TypeScript、Tailwind CSS，用 Vite 打包。
- 角色选择、分支剧情和冒险历史记录，全部在客户端完成。
角色改变的不只是名字。你选的是「来自亚特兰蒂斯的鲨鱼」还是「死神的学徒」，决定了模型的前提条件，因此同一句开场提示会因为角色不同而长出不同的故事。
🎮 开始游戏： majestic-bubblegum-97f279.netlify.app
先说清楚：首次运行时模型会下载到你的浏览器里，所以开场画面要等一会儿。这是代价换来的好处：你输入的内容始终不离开本机，故事背后也没有任何 API 账单。