Add app code

README.md

@@ -1,10 +1,12 @@
 ---
 title: Amazon This Object
-emoji: 📉
-colorFrom: pink
+emoji: 📦
+colorFrom: red
 colorTo: blue
 sdk: static
 pinned: false
+short_description: Take a picture of an object with Reachy Mini and try to find it on Amazon.
+tags:
+ - reachy_mini
+ - reachy_mini_python_app
 ---
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

amazon_this_object/main.py

@@ -0,0 +1,118 @@
+import threading
+import base64
+from datetime import datetime
+from reachy_mini import ReachyMini, ReachyMiniApp
+from reachy_mini.utils import create_head_pose
+import numpy as np
+import time
+import cv2
+from fastapi.responses import Response
+import os
+from openai import OpenAI
+
+class AmazonThisObject(ReachyMiniApp):
+    # Optional: URL to a custom configuration page for the app
+    # eg. "http://localhost:8042"
+    custom_app_url: str | None = "http://0.0.0.0:8042"
+
+    def run(self, reachy_mini: ReachyMini, stop_event: threading.Event):
+        last_photo = None
+        last_photo_timestamp = None
+        image_url = f""
+
+        hf_client = OpenAI(
+            base_url="https://router.huggingface.co/v1",
+            #define token in environment variable
+            api_key=os.environ['HF_TOKEN']
+        )
+
+        #Take photo REST POST request
+        @self.settings_app.post("/take_photo")
+        def take_photo():
+            print("Take a photo")
+            nonlocal last_photo, last_photo_timestamp
+
+            # Part for the Simulator
+            # Initialize webcam (0 = default camera)
+            #cam = cv2.VideoCapture(0)
+            # Capture one frame with opencv on simulator [ need a webcam ] -> later replace by reachy robot camera
+            #ret, frame = cam.read()
+            #if not ret:
+            #    return {"success": False, "error": "Camera not available"}
+
+            #Code for reachy camera
+            frame = reachy_mini.media.get_frame()
+            if frame is None:
+                return {"success": False, "error": "Camera not available"}
+
+            # Encode as JPEG
+            success, encoded = cv2.imencode('.jpg', frame, [cv2.IMWRITE_JPEG_QUALITY, 90])
+            if not success:
+                return {"success": False, "error": "Failed to encode image"}
+            print("Encode picture Success")
+
+            #Save last photo
+            last_photo = encoded.tobytes()
+            last_photo_timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+
+            # Return base64 for preview
+            b64_image = base64.b64encode(last_photo).decode('utf-8')
+            image_url = f"data:image/jpeg;base64,{b64_image}"
+
+            return {
+                "success": True,
+                "preview": f"data:image/jpeg;base64,{b64_image}",
+                "filename": f"reachy_photo_{last_photo_timestamp}.jpg",
+            }
+
+        #Get link REST POST request
+        @self.settings_app.post("/get_link")
+        def get_link():
+            #Restore image from save variable last_photo
+            b64_image = base64.b64encode(last_photo).decode('utf-8')
+            image_url = f"data:image/jpeg;base64,{b64_image}"
+
+            #Use model zai-org/GLM-4.5V with inference novita with huggingface client.
+            #Analyse image and get URL only -> bypass blabla from LLM by usin "no blabla".
+            completion = hf_client.chat.completions.create(
+                model="zai-org/GLM-4.5V:novita",
+                messages=[
+                    {
+                        "role": "user",
+                        "content":
+                        [
+                            {
+                                "type": "text",
+                                "text": "Generate only a valid link to search object on amazon, no blabla."
+                            },
+                            {
+                                "type": "image_url",
+                                "image_url":
+                                {
+                                    "url": image_url
+                                }
+                            }
+                        ]
+                    }
+                ],
+            )
+            #Get link from result
+            url_link = completion.choices[0].message.content
+
+            #Clear content and keep only URL
+            url_link = url_link.replace("<|end_of_box|>", "")
+            url_link = url_link.replace("<|begin_of_box|>", "")
+
+            #Return success + url link
+            return {
+                "success": True,
+                "url": url_link
+            }
+
+        # Keep the app running
+        while not stop_event.is_set():
+            time.sleep(0.1)
+
+if __name__ == "__main__":
+    app = AmazonThisObject()
+    app.wrapped_run()

amazon_this_object/static/index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Amazon This Object</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>Amazon This Object</h1>
+        </header>
+
+        <main>
+            <div class="preview-container">
+                <img id="preview" src="" alt="Camera preview">
+                <div class="no-image" id="no-image">No image yet</div>
+            </div>
+
+            <div class="controls">
+                <button class="btn primary" id="take-btn">Capture object</button>
+                <button class="btn primary" id="link-btn">Amazon this object</button>
+            </div>
+            <div class="status" id="amazon_link"></div>
+            <div class="status" id="status"></div>
+        </main>
+    </div>
+
+    <script src="/static/main.js"></script>
+</body>
+</html>

amazon_this_object/static/main.js

@@ -0,0 +1,79 @@
+const preview = document.getElementById('preview');
+const noImage = document.getElementById('no-image');
+const takeBtn = document.getElementById('take-btn');
+const linkBtn = document.getElementById('link-btn');
+const amazonLink = document.getElementById('amazon_link');
+const status = document.getElementById('status');
+
+let currentFilename = null;
+
+function validURL(str) {
+  var pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
+    '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name
+    '((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
+    '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
+    '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
+    '(\\#[-a-z\\d_]*)?$','i'); // fragment locator
+  return !!pattern.test(str);
+}
+
+async function getLink() {
+    linkBtn.disabled = true;
+    linkBtn.textContent = 'Analyzing...';
+    status.textContent = '';
+
+    try {
+        const resp = await fetch('/get_link', { method: 'POST' });
+        const data = await resp.json();
+
+        if (data.success) {
+            status.textContent = 'Amazon link generation complete!';
+            url = data.url
+            if( validURL(url) )
+            {
+                amazonLink.innerHTML = "<a href=\""+data.url+"\">"+url+"</a>"
+                window.open(url, '_blank').focus();
+            }
+        }
+        else
+        {
+            status.textContent = 'Error: ' + data.error;
+        }
+    } catch (e) {
+        status.textContent = 'Failed to get a link';
+        console.error(e);
+    }
+
+    linkBtn.disabled = false;
+    linkBtn.textContent = 'Amazon this object';
+}
+
+async function takePhoto() {
+    takeBtn.disabled = true;
+    takeBtn.textContent = 'Taking...';
+    status.textContent = '';
+
+    try {
+        const resp = await fetch('/take_photo', { method: 'POST' });
+        const data = await resp.json();
+
+        if (data.success) {
+            preview.src = data.preview;
+            preview.style.display = 'block';
+            noImage.style.display = 'none';
+            currentFilename = data.filename;
+            status.textContent = 'Capture success!';
+        } else {
+            status.textContent = 'Error: ' + data.error;
+        }
+    } catch (e) {
+        status.textContent = 'Failed to take photo';
+        console.error(e);
+    }
+
+    takeBtn.disabled = false;
+    takeBtn.textContent = 'Capture object';
+}
+
+takeBtn.addEventListener('click', takePhoto);
+linkBtn.addEventListener('click', getLink);

amazon_this_object/static/style.css

@@ -0,0 +1,176 @@
+:root {
+    --bg: #ffffff;
+    --bg-secondary: #f5f5f5;
+    --text: #111111;
+    --text-muted: #888888;
+    --border: #e0e0e0;
+    --transition: 0.2s ease-in-out;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --bg: #121212;
+        --bg-secondary: #1e1e1e;
+        --text: #ffffff;
+        --text-muted: #bbbbbb;
+        --border: #333333;
+    }
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    min-height: 100vh;
+    font-size: 1rem; /* Base pour les rem */
+}
+
+.container {
+    max-width: 52.5rem; /* 840px en rem (16px base) */
+    margin: 0 auto;
+    padding: 1.5rem 1rem;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+header {
+    text-align: center;
+    margin-bottom: 1.5rem;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.375rem;
+    margin-bottom: 0.25rem;
+}
+
+.logo-icon {
+    width: 0.25rem;
+    height: 0.25rem;
+    background: var(--text);
+    border-radius: 50%;
+}
+
+.logo span {
+    font-size: 0.5625rem; /* 9px */
+    letter-spacing: 0.125rem;
+    color: var(--text-muted);
+    text-transform: uppercase;
+}
+
+h1 {
+    font-size: 0.875rem; /* 14px */
+    font-weight: 500;
+    letter-spacing: 0.25rem;
+    text-transform: uppercase;
+}
+
+main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.preview-container {
+    position: relative;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    border-radius: 0.5rem;
+    aspect-ratio: 4/3;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: border-color var(--transition);
+}
+
+.preview-container:hover {
+    border-color: var(--text-muted);
+}
+
+#preview {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: none;
+}
+
+.no-image {
+    font-size: 0.6875rem; /* 11px */
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.0625rem;
+}
+
+.controls {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.btn {
+    flex: 1;
+    padding: 0.75rem;
+    border: 1px solid var(--border);
+    border-radius: 0.25rem;
+    font-family: inherit;
+    font-size: 0.6875rem; /* 11px */
+    letter-spacing: 0.0625rem;
+    text-transform: uppercase;
+    cursor: pointer;
+    background: var(--bg);
+    color: var(--text);
+    transition: background var(--transition), opacity var(--transition);
+}
+
+.btn:hover {
+    background: var(--bg-secondary);
+}
+
+.btn.primary {
+    background: var(--text);
+    border-color: var(--text);
+    color: var(--bg);
+}
+
+.btn.primary:hover {
+    opacity: 0.9;
+    background: var(--text); /* Garde la couleur pour primary */
+}
+
+.btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+.btn:focus {
+    outline: none;
+    box-shadow: 0 0 0 0.125rem rgba(0, 0, 0, 0.2); /* Améliore l'accessibilité */
+}
+
+.status {
+    text-align: center;
+    font-size: 0.6875rem; /* 11px */
+    color: var(--text-muted);
+    min-height: 1rem;
+}
+
+/* Media query pour plus de responsivité */
+@media (min-width: 48rem) { /* 768px */
+    .container {
+        padding: 2rem;
+    }
+
+    h1 {
+        font-size: 1rem;
+    }
+}

index.html

@@ -1,19 +1,234 @@
 <!doctype html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
+
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width" />
+	<title> Amazon This Object </title>
+	<link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+	<div class="hero">
+		<div class="hero-content">
+			<div class="app-icon">📦</div>
+			<h1> Amazon This Object </h1>
+			<p class="tagline"></p>
 		</div>
-	</body>
-</html>
+	</div>
+
+	<div class="container">
+		<div class="main-card">
+			<div class="app-preview">
+				<div class="preview-image">
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="download-section">
+		<div class="download-card">
+			<h2>Install This App</h2>
+
+			<div class="dashboard-config">
+				<label for="dashboardUrl">Your Reachy Dashboard URL:</label>
+				<input type="url" id="dashboardUrl" value="http://localhost:8000"
+					placeholder="http://your-reachy-ip:8000" />
+			</div>
+
+			<button id="installBtn" class="install-btn primary">
+				<span class="btn-icon">📥</span>
+				Install Amazon This Object to Reachy Mini
+			</button>
+
+			<div id="installStatus" class="install-status"></div>
+
+		</div>
+	</div>
+
+	<div class="footer">
+		<p>
+			📦 Amazon This Object •
+			<a href="https://github.com/pollen-robotics" target="_blank">Pollen Robotics</a> •
+			<a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini_Apps" target="_blank">Browse More
+				Apps</a>
+		</p>
+	</div>
+	</div>
+
+	<script>
+		// Get the current Hugging Face Space URL as the repository URL
+		function getCurrentSpaceUrl() {
+			// Get current page URL and convert to repository format
+			const currentUrl = window.location.href;
+
+			// Remove any trailing slashes and query parameters
+			const cleanUrl = currentUrl.split('?')[0].replace(/\/$/, '');
+
+			return cleanUrl;
+		}
+
+		// Parse TOML content to extract project name
+		function parseTomlProjectName(tomlContent) {
+			try {
+				const lines = tomlContent.split('\n');
+				let inProjectSection = false;
+
+				for (const line of lines) {
+					const trimmedLine = line.trim();
+
+					// Check if we're entering the [project] section
+					if (trimmedLine === '[project]') {
+						inProjectSection = true;
+						continue;
+					}
+
+					// Check if we're entering a different section
+					if (trimmedLine.startsWith('[') && trimmedLine !== '[project]') {
+						inProjectSection = false;
+						continue;
+					}
+
+					// If we're in the project section, look for the name field
+					if (inProjectSection && trimmedLine.startsWith('name')) {
+						const match = trimmedLine.match(/name\s*=\s*["']([^"']+)["']/);
+						if (match) {
+							// Convert to lowercase and replace invalid characters for app naming
+							return match[1].toLowerCase().replace(/[^a-z0-9-_]/g, '-');
+						}
+					}
+				}
+
+				throw new Error('Project name not found in pyproject.toml');
+			} catch (error) {
+				console.error('Error parsing pyproject.toml:', error);
+				return 'unknown-app';
+			}
+		}
+
+		// Fetch and parse pyproject.toml from the current space
+		async function getAppNameFromCurrentSpace() {
+			try {
+				// Fetch pyproject.toml from the current space
+				const response = await fetch('./pyproject.toml');
+				if (!response.ok) {
+					throw new Error(`Failed to fetch pyproject.toml: ${response.status}`);
+				}
+
+				const tomlContent = await response.text();
+				return parseTomlProjectName(tomlContent);
+			} catch (error) {
+				console.error('Error fetching app name from current space:', error);
+				// Fallback to extracting from URL if pyproject.toml is not accessible
+				const url = getCurrentSpaceUrl();
+				const parts = url.split('/');
+				const spaceName = parts[parts.length - 1];
+				return spaceName.toLowerCase().replace(/[^a-z0-9-_]/g, '-');
+			}
+		}
+
+		async function installToReachy() {
+			const dashboardUrl = document.getElementById('dashboardUrl').value.trim();
+			const statusDiv = document.getElementById('installStatus');
+			const installBtn = document.getElementById('installBtn');
+
+			if (!dashboardUrl) {
+				showStatus('error', 'Please enter your Reachy dashboard URL');
+				return;
+			}
+
+			try {
+				installBtn.disabled = true;
+				installBtn.innerHTML = '<span class="btn-icon">⏳</span>Installing...';
+				showStatus('loading', 'Connecting to your Reachy dashboard...');
+
+				// Test connection
+				const testResponse = await fetch(`${dashboardUrl}/api/status`, {
+					method: 'GET',
+					mode: 'cors',
+				});
+
+				if (!testResponse.ok) {
+					throw new Error('Cannot connect to dashboard. Make sure the URL is correct and the dashboard is running.');
+				}
+
+				showStatus('loading', 'Reading app configuration...');
+
+				// Get app name from pyproject.toml in current space
+				const appName = await getAppNameFromCurrentSpace();
+
+				// Get current space URL as repository URL
+				const repoUrl = getCurrentSpaceUrl();
+
+				showStatus('loading', `Starting installation of "${appName}"...`);
+
+				// Start installation
+				const installResponse = await fetch(`${dashboardUrl}/api/install`, {
+					method: 'POST',
+					mode: 'cors',
+					headers: {
+						'Content-Type': 'application/json',
+					},
+					body: JSON.stringify({
+						url: repoUrl,
+						name: appName
+					})
+				});
+
+				const result = await installResponse.json();
+
+				if (installResponse.ok) {
+					showStatus('success', `✅ Installation started for "${appName}"! Check your dashboard for progress.`);
+					setTimeout(() => {
+						showStatus('info', `Open your dashboard at ${dashboardUrl} to see the installed app.`);
+					}, 3000);
+				} else {
+					throw new Error(result.detail || 'Installation failed');
+				}
+
+			} catch (error) {
+				console.error('Installation error:', error);
+				showStatus('error', `❌ ${error.message}`);
+			} finally {
+				installBtn.disabled = false;
+				installBtn.innerHTML = '<span class="btn-icon">📥</span>Install App to Reachy';
+			}
+		}
+
+		function showStatus(type, message) {
+			const statusDiv = document.getElementById('installStatus');
+			statusDiv.className = `install-status ${type}`;
+			statusDiv.textContent = message;
+			statusDiv.style.display = 'block';
+		}
+
+		function copyToClipboard() {
+			const repoUrl = document.getElementById('repoUrl').textContent;
+			navigator.clipboard.writeText(repoUrl).then(() => {
+				showStatus('success', '📋 Repository URL copied to clipboard!');
+			}).catch(() => {
+				showStatus('error', 'Failed to copy URL. Please copy manually.');
+			});
+		}
+
+		// Update the displayed repository URL on page load
+		document.addEventListener('DOMContentLoaded', () => {
+			// Auto-detect local dashboard
+			const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
+			if (isLocalhost) {
+				document.getElementById('dashboardUrl').value = 'http://localhost:8000';
+			}
+
+			// Update the repository URL display if element exists
+			const repoUrlElement = document.getElementById('repoUrl');
+			if (repoUrlElement) {
+				repoUrlElement.textContent = getCurrentSpaceUrl();
+			}
+		});
+
+		// Event listeners
+		document.getElementById('installBtn').addEventListener('click', installToReachy);
+	</script>
+</body>
+
+</html>

pyproject.toml

@@ -0,0 +1,27 @@
+[build-system]
+requires = ["setuptools>=61.0"]
+build-backend = "setuptools.build_meta"
+
+[project]
+name = "amazon-this-object"
+version = "0.1.0"
+description = "Get a link on Amazon, to buy a similar object you have. ( Mix between Take a Photo, and Describe my room )"
+readme = "README.md"
+requires-python = ">=3.10"
+dependencies = [
+    "reachy-mini"
+]
+keywords = ["reachy-mini-app"]
+
+[project.entry-points."reachy_mini_apps"]
+amazon-this-object = "amazon_this_object.main:AmazonThisObject"
+
+[tool.setuptools]
+package-dir = { "" = "." }
+include-package-data = true
+
+[tool.setuptools.packages.find]
+where = ["."]
+
+[tool.setuptools.package-data]
+amazon_this_object = ["**/*"] # Also include all non-.py files

style.css

@@ -1,28 +1,411 @@
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+	line-height: 1.6;
+	color: #333;
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	min-height: 100vh;
+}
+
+.hero {
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	color: white;
+	padding: 4rem 2rem;
+	text-align: center;
+}
+
+.hero-content {
+	max-width: 800px;
+	margin: 0 auto;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.app-icon {
+	font-size: 4rem;
+	margin-bottom: 1rem;
+	display: inline-block;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.hero h1 {
+	font-size: 3rem;
+	font-weight: 700;
+	margin-bottom: 1rem;
+	background: linear-gradient(45deg, #fff, #f0f9ff);
+	background-clip: text;
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
 }
 
-.card {
-	max-width: 620px;
+.tagline {
+	font-size: 1.25rem;
+	opacity: 0.9;
+	max-width: 600px;
 	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
+}
+
+.container {
+	max-width: 640px;
+	margin: 0 auto;
+	padding: 0 2rem;
+	position: relative;
+	z-index: 2;
+}
+
+.main-card {
+	background: white;
+	border-radius: 20px;
+	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+	margin-top: -2rem;
+	overflow: hidden;
+	margin-bottom: 3rem;
+}
+
+.app-preview {
+	background: linear-gradient(135deg, #1e3a8a, #3b82f6);
+	padding: 3rem;
+	color: white;
+	text-align: center;
+	position: relative;
+}
+
+.preview-image {
+	background: #000;
+	border-radius: 15px;
+	padding: 2rem;
+	max-width: 500px;
+	margin: 0 auto;
+	position: relative;
+	overflow: hidden;
+}
+
+.camera-feed {
+	font-size: 4rem;
+	margin-bottom: 1rem;
+	opacity: 0.7;
+}
+
+.detection-overlay {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	width: 100%;
+}
+
+.bbox {
+	background: rgba(34, 197, 94, 0.9);
+	color: white;
+	padding: 0.5rem 1rem;
+	border-radius: 8px;
+	font-size: 0.9rem;
+	font-weight: 600;
+	margin: 0.5rem;
+	display: inline-block;
+	border: 2px solid #22c55e;
+}
+
+.app-details {
+	padding: 3rem;
+}
+
+.app-details h2 {
+	font-size: 2rem;
+	color: #1e293b;
+	margin-bottom: 2rem;
+	text-align: center;
+}
+
+.template-info {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+	gap: 2rem;
+	margin-bottom: 3rem;
+}
+
+.info-box {
+	background: #f0f9ff;
+	border: 2px solid #e0f2fe;
+	border-radius: 12px;
+	padding: 2rem;
+}
+
+.info-box h3 {
+	color: #0c4a6e;
+	margin-bottom: 1rem;
+	font-size: 1.2rem;
+}
+
+.info-box p {
+	color: #0369a1;
+	line-height: 1.6;
+}
+
+.how-to-use {
+	background: #fefce8;
+	border: 2px solid #fde047;
+	border-radius: 12px;
+	padding: 2rem;
+	margin-top: 3rem;
+}
+
+.how-to-use h3 {
+	color: #a16207;
+	margin-bottom: 1.5rem;
+	font-size: 1.3rem;
+	text-align: center;
+}
+
+.steps {
+	display: flex;
+	flex-direction: column;
+	gap: 1.5rem;
+}
+
+.step {
+	display: flex;
+	align-items: flex-start;
+	gap: 1rem;
+}
+
+.step-number {
+	background: #eab308;
+	color: white;
+	width: 2rem;
+	height: 2rem;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-weight: bold;
+	flex-shrink: 0;
+}
+
+.step h4 {
+	color: #a16207;
+	margin-bottom: 0.5rem;
+	font-size: 1.1rem;
+}
+
+.step p {
+	color: #ca8a04;
+}
+
+.download-card {
+	background: white;
+	border-radius: 20px;
+	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+	padding: 3rem;
+	text-align: center;
+}
+
+.download-card h2 {
+	font-size: 2rem;
+	color: #1e293b;
+	margin-bottom: 1rem;
+}
+
+.download-card>p {
+	color: #64748b;
+	font-size: 1.1rem;
+	margin-bottom: 2rem;
+}
+
+.dashboard-config {
+	margin-bottom: 2rem;
+	text-align: left;
+	max-width: 400px;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.dashboard-config label {
+	display: block;
+	color: #374151;
+	font-weight: 600;
+	margin-bottom: 0.5rem;
+}
+
+.dashboard-config input {
+	width: 100%;
+	padding: 0.75rem 1rem;
+	border: 2px solid #e5e7eb;
+	border-radius: 8px;
+	font-size: 0.95rem;
+	transition: border-color 0.2s;
+}
+
+.dashboard-config input:focus {
+	outline: none;
+	border-color: #667eea;
+}
+
+.install-btn {
+	background: linear-gradient(135deg, #667eea, #764ba2);
+	color: white;
+	border: none;
+	padding: 1.25rem 3rem;
 	border-radius: 16px;
+	font-size: 1.2rem;
+	font-weight: 700;
+	cursor: pointer;
+	transition: all 0.3s ease;
+	display: inline-flex;
+	align-items: center;
+	gap: 0.75rem;
+	margin-bottom: 2rem;
+	box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
+}
+
+.install-btn:hover:not(:disabled) {
+	transform: translateY(-3px);
+	box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
+}
+
+.install-btn:disabled {
+	opacity: 0.7;
+	cursor: not-allowed;
+	transform: none;
+}
+
+.manual-option {
+	background: #f8fafc;
+	border-radius: 12px;
+	padding: 2rem;
+	margin-top: 2rem;
+}
+
+.manual-option h3 {
+	color: #1e293b;
+	margin-bottom: 1rem;
+	font-size: 1.2rem;
+}
+
+.manual-option>p {
+	color: #64748b;
+	margin-bottom: 1rem;
+}
+
+.btn-icon {
+	font-size: 1.1rem;
+}
+
+.install-status {
+	padding: 1rem;
+	border-radius: 8px;
+	font-size: 0.9rem;
+	text-align: center;
+	display: none;
+	margin-top: 1rem;
+}
+
+.install-status.success {
+	background: #dcfce7;
+	color: #166534;
+	border: 1px solid #bbf7d0;
+}
+
+.install-status.error {
+	background: #fef2f2;
+	color: #dc2626;
+	border: 1px solid #fecaca;
+}
+
+.install-status.loading {
+	background: #dbeafe;
+	color: #1d4ed8;
+	border: 1px solid #bfdbfe;
+}
+
+.install-status.info {
+	background: #e0f2fe;
+	color: #0369a1;
+	border: 1px solid #7dd3fc;
+}
+
+.manual-install {
+	background: #1f2937;
+	border-radius: 8px;
+	padding: 1rem;
+	margin-bottom: 1rem;
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+}
+
+.manual-install code {
+	color: #10b981;
+	font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
+	font-size: 0.85rem;
+	flex: 1;
+	overflow-x: auto;
+}
+
+.copy-btn {
+	background: #374151;
+	color: white;
+	border: none;
+	padding: 0.5rem 1rem;
+	border-radius: 6px;
+	font-size: 0.8rem;
+	cursor: pointer;
+	transition: background-color 0.2s;
+}
+
+.copy-btn:hover {
+	background: #4b5563;
+}
+
+.manual-steps {
+	color: #6b7280;
+	font-size: 0.9rem;
+	line-height: 1.8;
+}
+
+.footer {
+	text-align: center;
+	padding: 2rem;
+	color: white;
+	opacity: 0.8;
+}
+
+.footer a {
+	color: white;
+	text-decoration: none;
+	font-weight: 600;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.footer a:hover {
+	text-decoration: underline;
 }
+
+/* Responsive Design */
+@media (max-width: 768px) {
+	.hero {
+		padding: 2rem 1rem;
+	}
+
+	.hero h1 {
+		font-size: 2rem;
+	}
+
+	.container {
+		padding: 0 1rem;
+	}
+
+	.app-details,
+	.download-card {
+		padding: 2rem;
+	}
+
+	.features-grid {
+		grid-template-columns: 1fr;
+	}
+
+	.download-options {
+		grid-template-columns: 1fr;
+	}
+}