Skip to content

Commit 304377e

Browse files
JoshuaPubNubclaude
JoshuaPubNub
and
claude
committed
Initial frontend: chat with 5090_gemma_4
Vite + vanilla JS app that calls the 5090_gemma_4 Blocks agent via @blocks-network/sdk. Single-file production build via vite-plugin-singlefile so dist/index.html is downloadable + runnable directly in any browser, or hostable on GitHub Pages. Features: - Paste Blocks API key (saved to localStorage) - Multi-conversation history with sidebar (saved to localStorage) - max_tokens slider (256-4096) - Auto-titles conversations from first user message - ⌘/Ctrl+Enter to send Privacy: API key + history live in the user's browser only. The host (JoshuaPubNub/gemma) never sees anything. GitHub Actions workflow auto-deploys to GitHub Pages on push to main. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
0 parents  commit 304377e

9 files changed

Lines changed: 5465 additions & 0 deletions

File tree

‎.github/workflows/deploy.yml‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [main]
6+
workflow_dispatch:
7+
8+
permissions:
9+
contents: read
10+
pages: write
11+
id-token: write
12+
13+
concurrency:
14+
group: pages
15+
cancel-in-progress: false
16+
17+
jobs:
18+
build:
19+
runs-on: ubuntu-latest
20+
steps:
21+
- uses: actions/checkout@v4
22+
- uses: actions/setup-node@v4
23+
with:
24+
node-version: 20
25+
cache: npm
26+
- run: npm ci
27+
- run: npm run build
28+
- uses: actions/upload-pages-artifact@v3
29+
with:
30+
path: dist
31+
32+
deploy:
33+
needs: build
34+
runs-on: ubuntu-latest
35+
environment:
36+
name: github-pages
37+
url: ${{ steps.deployment.outputs.page_url }}
38+
steps:
39+
- id: deployment
40+
uses: actions/deploy-pages@v4

‎.gitignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
node_modules/
2+
dist/
3+
.DS_Store
4+
*.log
5+
.env
6+
.env.local

‎README.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# Gemma
2+
3+
Browser frontend for the [`5090_gemma_4`](https://app.blocks.ai/agents/5090_gemma_4) Blocks agent — chat with Gemma-4-26B running on a UK 5090.
4+
5+
**Live:** https://joshuapubnub.github.io/gemma/
6+
7+
## Use it
8+
9+
1. Sign up at [app.blocks.ai](https://app.blocks.ai) and grab an API key.
10+
2. Visit https://joshuapubnub.github.io/gemma/ (or open the downloaded `index.html` locally).
11+
3. Paste your key, click save.
12+
4. Start a new chat. First 3 calls per account are free; after that, $0.01/call.
13+
14+
Your API key and chat history live in this browser's `localStorage` only — they never touch the host or any backend.
15+
16+
## Run/build locally
17+
18+
```bash
19+
npm install
20+
npm run dev # vite dev server on localhost:5173
21+
npm run build # writes dist/index.html (single file, all inlined)
22+
```
23+
24+
## What's inside
25+
26+
- Vite + vanilla JS, no framework
27+
- `@blocks-network/sdk` for calling the agent
28+
- `vite-plugin-singlefile` so the production build is one HTML file
29+
- localStorage for API key, max-tokens preference, and conversation history
30+
31+
## Limits
32+
33+
- Max 4096 output tokens per call (capped by the agent server-side)
34+
- Total context 8192 tokens — leaves ~4000 for the prompt
35+
- One conversation at a time uses streaming under the hood; switching conversations is instant

‎index.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Gemma — 5090</title>
7+
</head>
8+
<body>
9+
<div id="app">
10+
<header>
11+
<h1>Gemma <span class="sub">on a 5090</span></h1>
12+
<div class="key-row">
13+
<input id="apiKey" type="password" placeholder="paste your Blocks API key (bk_...)" autocomplete="off" />
14+
<button id="saveKey">save</button>
15+
<span id="keyStatus" class="muted"></span>
16+
</div>
17+
</header>
18+
19+
<aside id="sidebar">
20+
<button id="newChat">+ new chat</button>
21+
<ul id="convList"></ul>
22+
<div class="settings">
23+
<label>
24+
<span>max tokens: <strong id="mtVal">1024</strong></span>
25+
<input id="maxTokens" type="range" min="256" max="4096" step="64" value="1024" />
26+
</label>
27+
</div>
28+
<p class="muted footer">
29+
Calls <code>5090_gemma_4</code> on Blocks Network.<br />
30+
$0.01/task after 3 free trials.<br />
31+
Your key + history live in this browser only.
32+
</p>
33+
</aside>
34+
35+
<main id="chat">
36+
<div id="messages"></div>
37+
<form id="composer">
38+
<textarea id="prompt" placeholder="ask Gemma… (⌘/ctrl+Enter to send)" rows="3"></textarea>
39+
<div class="composer-row">
40+
<span id="composerHint" class="muted"></span>
41+
<button id="send" type="submit" disabled>send</button>
42+
</div>
43+
</form>
44+
</main>
45+
</div>
46+
<script type="module" src="/src/main.js"></script>
47+
</body>
48+
</html>

0 commit comments

Comments
 (0)
⚡