Skip to content

Commit e57809c

Browse files
letmaikletmaik
committed
init
0 parents  commit e57809c

26 files changed

+9471
-0
lines changed

‎.github/workflows/publish.yml‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
name: Publish
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
workflow_dispatch:
8+
9+
jobs:
10+
build:
11+
runs-on: ubuntu-latest
12+
13+
steps:
14+
- uses: actions/checkout@v4
15+
- uses: actions/setup-node@v4
16+
with:
17+
node-version: 20.x
18+
- run: npm ci
19+
- run: npm run build
20+
- uses: actions/upload-pages-artifact@v4
21+
with:
22+
path: dist/
23+
24+
deploy:
25+
permissions:
26+
pages: write # to deploy to Pages
27+
id-token: write # to verify the deployment originates from an appropriate source
28+
29+
environment:
30+
name: github-pages
31+
url: ${{ steps.deployment.outputs.page_url }}
32+
33+
runs-on: ubuntu-latest
34+
needs: build
35+
steps:
36+
- id: deployment
37+
uses: actions/deploy-pages@v4

‎.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎AGENTS.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# Agent Development Notes
2+
3+
This document contains important notes and considerations for AI agents working on this project.
4+
5+
## Browser Compatibility
6+
7+
This project requires modern browsers with the following features:
8+
9+
- **Clipboard API**: The copy-to-clipboard functionality uses `navigator.clipboard.writeText()` which requires HTTPS in production and is not supported in older browsers.
10+
- **WebGPU**: The core AI functionality requires WebGPU support, limiting compatibility to recent browser versions.
11+
- **ES Modules**: The project uses modern JavaScript module syntax.
12+
13+
## Dependencies
14+
15+
- **react-syntax-highlighter**: Used for code block syntax highlighting with Prism.js
16+
- **react-markdown**: Used for rendering markdown content with custom component renderers
17+
- **@huggingface/transformers**: Core AI/ML functionality for running models in the browser
18+
19+
## Development Guidelines
20+
21+
1. **No Legacy Browser Support**: This project intentionally does not support older browsers
22+
2. **Modern JavaScript**: Use modern ES6+ features freely
23+
3. **React Patterns**: Prefer hooks and functional components
24+
4. **Accessibility**: Ensure keyboard navigation and screen reader compatibility
25+
5. **Performance**: Be mindful of re-renders during token streaming

‎LICENSE‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
Copyright (c) 2025 Maik Riechert
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy
4+
of this software and associated documentation files (the "Software"), to deal
5+
in the Software without restriction, including without limitation the rights
6+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7+
copies of the Software, and to permit persons to whom the Software is
8+
furnished to do so, subject to the following conditions:
9+
10+
The above copyright notice and this permission notice shall be included in all
11+
copies or substantial portions of the Software.
12+
13+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19+
SOFTWARE.

‎README.md‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
# Privatgespräch
2+
3+
https://letmaik.github.io/privatgespräch/
4+
5+
A privacy-focused AI chat interface that runs language models entirely in your browser using WebGPU acceleration. Designed for desktop and laptop computers.
6+
7+
## Privacy & Offline Operation
8+
9+
- **Complete Privacy**: All AI processing happens locally in your browser - no data is ever sent to external servers
10+
- **Offline Capable**: After initial model download, the application works completely offline
11+
- **No Tracking**: No analytics, telemetry, or data collection of any kind
12+
- **Local Storage**: Models and conversations stay on your device
13+
14+
## Device Compatibility
15+
16+
**Recommended**: Desktop and laptop computers with dedicated or integrated GPU
17+
**Not Recommended**: Mobile phones or tablets (limited WebGPU support and performance)
18+
19+
**For Mobile**: Consider [EnclaveAI](https://enclaveai.com) for privacy-focused mobile AI chat
20+
21+
## Features
22+
23+
- **Local Processing**: AI inference runs entirely in the browser
24+
- **Multiple Models**: Support for Llama 3.2 1B, Phi-3.5 Mini, SmolLM2 1.7B, and Qwen3 0.6B
25+
- **WebGPU Acceleration**: Hardware-accelerated inference using GPU
26+
- **Syntax Highlighting**: Code blocks with full syntax highlighting
27+
- **Copy Functionality**: Copy code snippets and full responses
28+
- **Reasoning Support**: Collapsible thinking blocks for reasoning models
29+
30+
## Technology Stack
31+
32+
- **React 18**: UI framework with modern hooks
33+
- **Vite**: Build tool and development server
34+
- **Tailwind CSS**: Utility-first CSS framework
35+
- **Transformers.js**: Browser-based transformer model execution
36+
- **ONNX Runtime Web**: WebGPU-accelerated model runtime
37+
- **react-markdown**: Markdown rendering
38+
- **react-syntax-highlighter**: Code syntax highlighting
39+
40+
## Requirements
41+
42+
### Browser Compatibility
43+
- WebGPU support (Chrome 113+, Edge 113+)
44+
- Modern JavaScript (ES2020+)
45+
46+
### System Requirements
47+
- GPU with WebGPU support
48+
- 4GB+ RAM recommended
49+
- 2-3GB storage for model cache
50+
51+
**Note**: This application is optimized for desktop and laptop computers. Mobile devices have limited WebGPU support and may not provide adequate performance.
52+
53+
## Installation
54+
55+
```bash
56+
npm install
57+
npm run dev
58+
```
59+
60+
### Build
61+
62+
```bash
63+
npm run build
64+
npm run preview
65+
```
66+
67+
## Usage
68+
69+
1. Open the application (default: `http://localhost:5173`)
70+
2. Select a model from the dropdown
71+
3. Wait for initial model download and loading
72+
4. Start conversation by typing a message
73+
5. **Go offline**: After initial setup, disconnect from internet - the app continues working
74+
75+
**Privacy Note**: All conversations and AI processing remain on your device. No data leaves your computer.
76+
77+
## Architecture
78+
79+
### Frontend Structure
80+
```
81+
src/
82+
├── App.jsx # Main application component
83+
├── main.jsx # React app entry point
84+
├── worker.js # Web Worker for AI processing
85+
├── components/
86+
│ ├── Chat.jsx # Chat interface with message rendering
87+
│ ├── ModelSelector.jsx # Model selection dropdown
88+
│ ├── LoadingModal.jsx # Model loading progress modal
89+
│ ├── Progress.jsx # Progress bar component
90+
│ └── icons/ # Icon components
91+
└── index.css # Global styles
92+
```
93+
94+
### Components
95+
96+
- **Web Worker** (`worker.js`): Handles model loading and inference
97+
- **Chat Component** (`Chat.jsx`): Message rendering with markdown support
98+
- **Model Selector** (`ModelSelector.jsx`): Model selection interface
99+
- **Think Blocks**: Collapsible reasoning blocks for compatible models
100+
101+
### Supported Models
102+
103+
| Model | Size | ID | Features |
104+
|-------|------|----|---------|
105+
| Llama 3.2 1B | 1.2 GB | `onnx-community/Llama-3.2-1B-Instruct-q4f16` | General chat |
106+
| Phi-3.5 Mini | 2.1 GB | `onnx-community/Phi-3.5-mini-instruct-onnx-web` | Code generation |
107+
| SmolLM2 1.7B | 1.1 GB | `HuggingFaceTB/SmolLM2-1.7B-Instruct` | Efficient chat |
108+
| Qwen3 0.6B | 0.5 GB | `onnx-community/Qwen3-0.6B-ONNX` | Reasoning support |
109+
110+
## Configuration
111+
112+
To add new models, update both `worker.js` and `ModelSelector.jsx`:
113+
114+
```javascript
115+
// worker.js - Add model configuration
116+
static getModelConfig(model_id) {
117+
const configs = {
118+
"new-model-id": {
119+
dtype: "q4f16",
120+
device: "webgpu"
121+
}
122+
};
123+
}
124+
```
125+
126+
```javascript
127+
// ModelSelector.jsx - Add to AVAILABLE_MODELS
128+
{
129+
id: 'model-key',
130+
name: 'Model Name',
131+
description: 'Description and size',
132+
url: 'new-model-id',
133+
hasReasoningBlocks: false
134+
}
135+
```
136+
137+
## Troubleshooting
138+
139+
### WebGPU Issues
140+
- Use Chrome 113+ or Edge 113+
141+
- Check WebGPU support at chrome://gpu
142+
- Enable WebGPU in browser flags if needed
143+
144+
### Model Loading
145+
- Verify stable internet connection
146+
- Check browser console for errors
147+
- Clear browser cache if needed
148+
149+
### Performance
150+
- Close GPU-intensive applications
151+
- Use smaller models for better performance
152+
- Ensure sufficient RAM (4GB+)
153+
154+
## License
155+
156+
Open source project. See license file for details.

‎eslint.config.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import js from "@eslint/js";
2+
import globals from "globals";
3+
import react from "eslint-plugin-react";
4+
import reactHooks from "eslint-plugin-react-hooks";
5+
import reactRefresh from "eslint-plugin-react-refresh";
6+
7+
export default [
8+
{ ignores: ["dist"] },
9+
{
10+
files: ["**/*.{js,jsx}"],
11+
languageOptions: {
12+
ecmaVersion: 2020,
13+
globals: globals.browser,
14+
parserOptions: {
15+
ecmaVersion: "latest",
16+
ecmaFeatures: { jsx: true },
17+
sourceType: "module",
18+
},
19+
},
20+
settings: { react: { version: "18.3" } },
21+
plugins: {
22+
react,
23+
"react-hooks": reactHooks,
24+
"react-refresh": reactRefresh,
25+
},
26+
rules: {
27+
...js.configs.recommended.rules,
28+
...react.configs.recommended.rules,
29+
...react.configs["jsx-runtime"].rules,
30+
...reactHooks.configs.recommended.rules,
31+
"react/jsx-no-target-blank": "off",
32+
"react-refresh/only-export-components": [
33+
"warn",
34+
{ allowConstantExport: true },
35+
],
36+
},
37+
},
38+
];

‎index.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/logo.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Privatgespräch</title>
8+
</head>
9+
10+
<body>
11+
<div id="root"></div>
12+
13+
<script>
14+
window.MathJax = {
15+
tex: {
16+
inlineMath: [
17+
["$", "$"],
18+
["\\(", "\\)"],
19+
],
20+
},
21+
svg: {
22+
fontCache: "global",
23+
},
24+
};
25+
</script>
26+
<script
27+
id="MathJax-script"
28+
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
29+
></script>
30+
<script type="module" src="/src/main.jsx"></script>
31+
</body>
32+
</html>

0 commit comments

Comments
 (0)