Spaces:
Running
Running
File size: 16,446 Bytes
3124de9 702939b 3124de9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 | <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>CookAIware — Reachy Mini Kitchen Assistant</title>
<meta property="og:title" content="CookAIware — Reachy Mini Kitchen Assistant" />
<meta property="og:description" content="Track pantry items, plan family meals, and generate shopping lists by talking to Reachy Mini." />
<meta property="og:image" content="CookAIware.jpeg" />
<meta property="og:type" content="website" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:wght@400;600;700&family=Nunito:wght@400;600;700&display=swap" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="bg-orbit"></div>
<div class="bg-sparkle"></div>
<div class="topbar">
<div class="container topbar-inner">
<div class="brand">
<span class="brand-dot"></span>
<span>CookAIware</span>
</div>
<a class="btn ghost" href="#install">Get App</a>
</div>
</div>
<header class="hero">
<div class="container hero-grid">
<div class="hero-content">
<div class="badge-group">
<span class="badge">Reachy Mini App</span>
<span class="badge">Inventory</span>
<span class="badge">Meal planning</span>
<span class="badge">Shopping lists</span>
</div>
<h1>Plan meals. Track food. Just talk to Reachy.</h1>
<p class="subtitle">CookAIware turns Reachy Mini into a kitchen assistant that remembers what you have at home,
plans meals for your family, and builds shopping lists automatically.</p>
<div class="btn-group">
<a class="btn primary" href="#install">Install on Reachy Mini</a>
<a class="btn ghost" href="#how">How it works</a>
</div>
<div class="feature-pills">
<div class="feature-pill">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Local JSON Data
</div>
<div class="feature-pill">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
Privacy First
</div>
</div>
</div>
<div class="hero-visual-wrapper">
<img src="CookAIware.jpeg" alt="CookAIware Reachy Mini Illustration" class="hero-visual" width="800" height="380">
</div>
</div>
</header>
<main>
<section class="section chat-showcase">
<div class="container">
<div class="section-header">
<p class="eyebrow">Conversation demo</p>
<h2>Talk naturally with Reachy</h2>
<p class="muted">CookAIware understands everyday kitchen conversations. What you bought, what you're cooking, and what you need to buy next.</p>
</div>
<div class="chat-panel chat-ui">
<div id="transcript" class="transcript">
<div class="msg assistant seq-1">
<img class="avatar" src="src/cookAIware/static/reachymini_avatar.png" alt="assistant" />
<div class="bubble assistant">Hello! I'm ready to help with your inventory, meals, and shopping lists. Let's get started whenever you are.</div>
</div>
<div class="msg user seq-2">
<img class="avatar" src="src/cookAIware/static/user_avatar.png" alt="user" />
<div class="bubble user">What do we have for lunch today?</div>
</div>
<div class="msg assistant seq-3">
<img class="avatar" src="src/cookAIware/static/reachymini_avatar.png" alt="assistant" />
<div class="bubble assistant">Today we're having chicken and tomato rice as a side dish.</div>
</div>
<div class="msg user seq-4">
<img class="avatar" src="src/cookAIware/static/user_avatar.png" alt="user" />
<div class="bubble user">Great, thanks Reachy!</div>
</div>
</div>
</div>
</div>
</section>
<section id="how" class="section">
<div class="container">
<div class="section-header">
<p class="eyebrow">How it works</p>
<h2>From pantry to plan in four simple steps</h2>
<p class="muted">CookAIware makes everyday food management simple: add ingredients, plan meals, cook to update inventory, and automatically build your shopping list.</p>
</div>
<div class="feature-toggle">
<input class="feature-input" type="radio" name="feature" id="feature-inventory" checked />
<input class="feature-input" type="radio" name="feature" id="feature-plan" />
<input class="feature-input" type="radio" name="feature" id="feature-shop" />
<input class="feature-input" type="radio" name="feature" id="feature-ask" />
<div class="card-grid">
<label class="card card-toggle" for="feature-inventory">
<h3>1. Capture inventory</h3>
<p>Tell Reachy what you bought. CookAIware stores quantity, unit, expiration date, and storage location.</p>
</label>
<label class="card card-toggle" for="feature-plan">
<h3>2. Plan the week</h3>
<p>Your meals are planned automatically using your pantry and your family schedule.</p>
</label>
<label class="card card-toggle" for="feature-shop">
<h3>3. Shop the shortfalls</h3>
<p>Generate a shopping list that fills only what your meal plan requires.</p>
</label>
<label class="card card-toggle" for="feature-ask">
<h3>4. Cook and update inventory</h3>
<p>Confirm servings, get exact quantities, and update inventory automatically when you cook.</p>
</label>
</div>
<div class="feature-panels">
<div class="feature-panel" id="panel-inventory">
<div class="chat-panel chat-ui">
<div class="transcript">
<div class="msg assistant seq-1">
<img class="avatar" src="src/cookAIware/static/reachymini_avatar.png" alt="assistant" />
<div class="bubble assistant">Tell me what you bought, and I will log it.</div>
</div>
<div class="msg user seq-2">
<img class="avatar" src="src/cookAIware/static/user_avatar.png" alt="user" />
<div class="bubble user">I bought 2 kg chicken and 1 kg carrots.</div>
</div>
<div class="msg assistant seq-3">
<img class="avatar" src="src/cookAIware/static/reachymini_avatar.png" alt="assistant" />
<div class="bubble assistant">Added. Any expiration dates or storage locations?</div>
</div>
</div>
</div>
</div>
<div class="feature-panel" id="panel-plan">
<div class="chat-panel chat-ui">
<div class="transcript">
<div class="msg user seq-1">
<img class="avatar" src="src/cookAIware/static/user_avatar.png" alt="user" />
<div class="bubble user">Plan meals for the week.</div>
</div>
<div class="msg assistant seq-2">
<img class="avatar" src="src/cookAIware/static/reachymini_avatar.png" alt="assistant" />
<div class="bubble assistant">Done. Weekdays are set as dinner-only, weekends include all meals, sized for your family.</div>
</div>
</div>
</div>
</div>
<div class="feature-panel" id="panel-shop">
<div class="chat-panel chat-ui">
<div class="transcript">
<div class="msg user seq-1">
<img class="avatar" src="src/cookAIware/static/user_avatar.png" alt="user" />
<div class="bubble user">Create a shopping list for the plan.</div>
</div>
<div class="msg assistant seq-2">
<img class="avatar" src="src/cookAIware/static/reachymini_avatar.png" alt="assistant" />
<div class="bubble assistant">Here is the list of items needed to complete the plan: rice, tomatoes, yogurt.</div>
</div>
</div>
</div>
</div>
<div class="feature-panel" id="panel-ask">
<div class="chat-panel chat-ui">
<div class="transcript">
<div class="msg user seq-1">
<img class="avatar" src="src/cookAIware/static/user_avatar.png" alt="user" />
<div class="bubble user">What are we having for dinner on Friday?</div>
</div>
<div class="msg assistant seq-2">
<img class="avatar" src="src/cookAIware/static/reachymini_avatar.png" alt="assistant" />
<div class="bubble assistant">Friday dinner is chicken with roasted carrots and bread. Should I cook it for 5 people?</div>
</div>
<div class="msg user seq-3">
<img class="avatar" src="src/cookAIware/static/user_avatar.png" alt="user" />
<div class="bubble user">Yes, that's for 2 adults and 3 children.</div>
</div>
<div class="msg assistant seq-4">
<img class="avatar" src="src/cookAIware/static/reachymini_avatar.png" alt="assistant" />
<div class="bubble assistant">Got it. For 5 servings you'll need 1.2 kg chicken, 600 g carrots, and 1 loaf of bread. You have enough in inventory. Shall I decrease these quantities now?</div>
</div>
<div class="msg user seq-5">
<img class="avatar" src="src/cookAIware/static/user_avatar.png" alt="user" />
<div class="bubble user">Yes, please update the inventory.</div>
</div>
<div class="msg assistant seq-6">
<img class="avatar" src="src/cookAIware/static/reachymini_avatar.png" alt="assistant" />
<div class="bubble assistant">Done. Your inventory is updated. Enjoy your meal!</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="privacy" class="section">
<div class="container">
<div class="section-header">
<p class="eyebrow">Privacy & keys</p>
<h2>Local data, clear controls</h2>
<p class="muted">Your household data stays local to your device. CookAIware stores everything in simple local JSON files.</p>
</div>
<div class="card-grid">
<div class="card">
<h3>Local storage</h3>
<p>CookAIware stores inventory, meal plans, and family profile data locally. No household data is uploaded to external services.</p>
</div>
<div class="card">
<h3>No assistant memory</h3>
<p>The LLM does not store state. It reads and writes only to the local files.</p>
</div>
<div class="card">
<h3>Data control</h3>
<p>The assistant is designed to be transparent and controllable, you can always view and edit data through the control panel.</p>
</div>
</div>
</div>
</section>
<section id="install" class="section install">
<div class="container">
<div class="section-header">
<p class="eyebrow">Install</p>
<h2>Install from the Reachy Mini app store</h2>
<p class="muted">Search for CookAIware in the dashboard, install, and start talking.</p>
</div>
<div class="install-layout">
<ol class="install-steps">
<li>
<span>Make sure you have the <a href="https://github.com/pollen-robotics/reachy-mini-desktop-app/releases/latest" class="link-tertiary">dashboard</a> installed.</span>
</li>
<li>
<span>Connect to your Reachy Mini using the dashboard.</span>
</li>
<li>
<span>Navigate to the "Applications" tab in the dashboard.</span>
</li>
<li>
<span>Find "cookAIware" in the list of available applications.</span>
</li>
<li>
<span>Click "Install".</span>
</li>
</ol>
<div class="install-sidebar">
<div class="install-card">
<h3>Set up your OpenAI API key</h3>
<p>Add your <code>OPENAI_API_KEY</code> to <code>.env</code> locally.</p>
</div>
<div class="install-card">
<h3>Control panel</h3>
<p>Access local settings from the Reachy dashboard by clicking the gear icon next to the app.</p>
<p>From there, you can view the live conversation and optionally manage inventory, meal planning and the shopping list.</p>
</div>
</div>
</div>
</div>
</section>
</main>
<section id="final-image" class="section final-image">
<div class="container">
<img src="CookAIware_laptop.png" alt="CookAIware on a laptop" class="final-image-visual" style="max-width:50%;height:auto;display:block;margin:0 auto;" />
</div>
</section>
<footer class="footer">
<div class="container footer-content">
<div class="footer-brand">
<h3>CookAIware</h3>
<p>A Reachy Mini app for family meal planning, pantry tracking, and shopping lists.</p>
</div>
<div class="footer-social">
<h4>Contact me</h4>
<div class="social-pills-row">
<a href="https://www.linkedin.com/in/jimenezcarrero" class="social-pill" target="_blank" rel="noopener noreferrer">
<svg fill="currentColor" viewBox="0 0 24 24" width="20" height="20"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
LinkedIn
</a>
<a href="https://github.com/jimenezcarrero" class="social-pill" target="_blank" rel="noopener noreferrer">
<svg fill="currentColor" viewBox="0 0 24 24" width="20" height="20"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
GitHub
</a>
</div>
</div>
</div>
</footer>
</body>
</html>
|