| @@ -1,134 +0,0 @@ |
| 1 | # Brand Bench |
| |
| 2 | |
| |
| 3 | A client-side brand identity generator. Describe a project and get a complete |
| |
| 4 | brand package — positioning, tone of voice, color palette, typography system, |
| |
| 5 | logo concepts, taglines, and usage examples — instantly in the browser. |
| |
| 6 | |
| |
| 7 | No backend. No accounts. Everything runs locally and persists in `localStorage`. |
| |
| 8 | |
| |
| 9 |  |
| |
| 10 | |
| |
| 11 | ## Features |
| |
| 12 | |
| |
| 13 | - **Template generation** — instant, offline-capable brand packages tailored by |
| |
| 14 | category (developer tool, creative studio, SaaS product, etc.) |
| |
| 15 | - **AI generation** — connect your local [Ollama](https://ollama.com) instance |
| |
| 16 | for LLM-powered output; cancellable mid-stream |
| |
| 17 | - **Multiple packages** — create, rename, duplicate, and switch between brand |
| |
| 18 | packages in tabs; each package is independently persisted |
| |
| 19 | - **Inline editing** — click any field in the preview to edit it directly |
| |
| 20 | - **Section locking** — lock sections before regenerating so they stay unchanged |
| |
| 21 | across runs |
| |
| 22 | - **Undo / redo** — full edit history per package (`⌘Z` / `⌘⇧Z`) |
| |
| 23 | - **Color palette** — editable swatches with a native color picker |
| |
| 24 | - **Typography system** — curated font pairings per category with an 8-level |
| |
| 25 | type scale |
| |
| 26 | - **Export** — download as Markdown, JSON, or a self-contained HTML guidelines page |
| |
| 27 | |
| |
| 28 | ## Getting started |
| |
| 29 | |
| |
| 30 | ```bash |
| |
| 31 | npm install |
| |
| 32 | npm run dev |
| |
| 33 | ``` |
| |
| 34 | |
| |
| 35 | Open `http://localhost:5173`. |
| |
| 36 | |
| |
| 37 | To build for production: |
| |
| 38 | |
| |
| 39 | ```bash |
| |
| 40 | npm run build # outputs to dist/ |
| |
| 41 | npm run preview # serve the build locally |
| |
| 42 | ``` |
| |
| 43 | |
| |
| 44 | ## AI with Ollama |
| |
| 45 | |
| |
| 46 | Brandbench can generate brand packages using a locally running Ollama model. |
| |
| 47 | |
| |
| 48 | 1. [Install Ollama](https://ollama.com/download) and pull a model: |
| |
| 49 | |
| |
| 50 | ```bash |
| |
| 51 | ollama pull llama3.2 # recommended default |
| |
| 52 | ollama pull mistral # good alternative |
| |
| 53 | ollama pull gemma3 # another option |
| |
| 54 | ``` |
| |
| 55 | |
| |
| 56 | 2. Make sure Ollama is running: |
| |
| 57 | |
| |
| 58 | ```bash |
| |
| 59 | ollama serve |
| |
| 60 | ``` |
| |
| 61 | |
| |
| 62 | 3. If you're running Ollama on a non-default port or a different host, set the |
| |
| 63 | `OLLAMA_ORIGINS` environment variable to allow browser requests: |
| |
| 64 | |
| |
| 65 | ```bash |
| |
| 66 | OLLAMA_ORIGINS="*" ollama serve |
| |
| 67 | ``` |
| |
| 68 | |
| |
| 69 | 4. Open Settings (⚙) in the app, enable AI, set your base URL |
| |
| 70 | (`http://localhost:11434` by default), select a model, and click **Test |
| |
| 71 | connection**. |
| |
| 72 | |
| |
| 73 | Larger models produce better-structured output. If generation fails with a JSON |
| |
| 74 | error, try a bigger model. Generation typically takes 15–60 seconds depending on |
| |
| 75 | hardware. |
| |
| 76 | |
| |
| 77 | ## Self-hosting with Docker |
| |
| 78 | |
| |
| 79 | A `Dockerfile` and `compose.yml` are included for deploying the app alongside |
| |
| 80 | Ollama on a server. |
| |
| 81 | |
| |
| 82 | ```bash |
| |
| 83 | docker compose up -d --build |
| |
| 84 | ``` |
| |
| 85 | |
| |
| 86 | The app is served on port 8000. Ollama's API is proxied through nginx at `/api/` |
| |
| 87 | so the browser never makes a cross-origin request — no CORS configuration |
| |
| 88 | needed. |
| |
| 89 | |
| |
| 90 | **After first boot, pull at least one model:** |
| |
| 91 | |
| |
| 92 | ```bash |
| |
| 93 | docker compose exec ollama ollama pull llama3.2 |
| |
| 94 | ``` |
| |
| 95 | |
| |
| 96 | Then open the app, go to Settings (⚙), enable AI, and set the Ollama base URL |
| |
| 97 | to `http://your-server:8000` (no path suffix). |
| |
| 98 | |
| |
| 99 | **GPU support:** If your server has an NVIDIA GPU, uncomment the `deploy` block |
| |
| 100 | in `compose.yml` (requires the |
| |
| 101 | [NVIDIA Container Toolkit](https://docs.nvidia.com/datacenter/cloud-native/container-toolkit/install-guide.html)). |
| |
| 102 | |
| |
| 103 | ## Project structure |
| |
| 104 | |
| |
| 105 | ``` |
| |
| 106 | src/ |
| |
| 107 | engine/ |
| |
| 108 | generator.ts # Template-based brand package generator |
| |
| 109 | aiGenerator.ts # Ollama integration |
| |
| 110 | hooks/ |
| |
| 111 | useWorkspace.ts # Per-package state, generate, undo/redo |
| |
| 112 | usePackages.ts # Multi-package tabs and localStorage slots |
| |
| 113 | useSettings.ts # Ollama settings persistence |
| |
| 114 | components/ |
| |
| 115 | InputPanel.tsx # Project details form |
| |
| 116 | PreviewPanel.tsx # Brand package preview with toolbar |
| |
| 117 | BrandDoc.tsx # Full brand document (sections, palette, type scale) |
| |
| 118 | PackageSwitcher.tsx # Tab bar with rename/duplicate/delete |
| |
| 119 | SettingsPanel.tsx # AI settings drawer |
| |
| 120 | lib/ |
| |
| 121 | sanitize.ts # Defensive coercion for AI output fields |
| |
| 122 | export.ts # Markdown / JSON / HTML export formatters |
| |
| 123 | types.ts # All shared TypeScript interfaces |
| |
| 124 | ``` |
| |
| 125 | |
| |
| 126 | ## Tech stack |
| |
| 127 | |
| |
| 128 | - [React 18](https://react.dev) + [TypeScript](https://www.typescriptlang.org) |
| |
| 129 | - [Vite](https://vitejs.dev) |
| |
| 130 | - No UI library — plain CSS with custom properties |
| |
| 131 | |
| |
| 132 | ## License |
| |
| 133 | |
| |
| 134 | MIT |
| |