| @@ -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 |