Add hf token support from UI

amazon_this_object/main.py

@@ -6,29 +6,104 @@ 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
+from pathlib import Path
+from fastapi import Request, Depends, Body
 
 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"
 
+    amaz_token: str = ""  # ou la valeur que tu veux
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.amaz_token = ""
+
+    def _get_self(self):
+        return self
+
     def run(self, reachy_mini: ReachyMini, stop_event: threading.Event):
         last_photo = None
         last_photo_timestamp = None
         image_url = f""
+        exec_dir = os.path.abspath(__file__)
+        exec_dir = exec_dir.replace("main.py","")
+        print("exec_dir "+exec_dir)
+        file_path = Path(exec_dir) / ".env"
+
+        @self.settings_app.post("/set_token")
+        async def set_hf_token(request: Request):
+            try:
+                data = await request.json()
+                token = data.get("token", "").strip()
+
+                if not token:
+                    return {
+                        "success": False,
+                        "message": "No token provided."
+                    }
 
-        hf_client = OpenAI(
-            base_url="https://router.huggingface.co/v1",
-            #define token in environment variable
-            api_key=os.environ['HF_TOKEN']
-        )
+                # Chemin du fichier .env dans le répertoire d'exécution
+
+                # On écrase ou crée le fichier avec HF_TOKEN=ton_token
+                with open(file_path, "w") as f:
+                    f.write(f"HF_TOKEN={token}\n")
+                    print(f"Token Hugging Face successfully saved in {file_path}")
+                return {
+                    "success": True,
+                    "message": "Token saved."
+                }
+            except Exception as e:
+                return {
+                   "success": False,
+                   "message": "Error on server side"
+                }
+
+        @self.settings_app.post("/check_token")  # ou .get() si tu préfères, c'est plus logique pour une vérif
+        async def hf_token_available(self_instance: AmazonThisObject = Depends(self._get_self)):
+             file_path = Path(exec_dir) / ".env"
+             if not file_path.exists():
+                 print(".env n'existe pas, ce con n'a pas encore mis son token.")
+                 return {
+                     "success": False,
+                    "token": None
+                 }
+             try:
+                 # On lit tout le fichier
+                  with open(file_path, "r", encoding="utf-8") as f:
+                        lines = f.readlines()
+                  # On cherche la ligne HF_TOKEN=
+                  for line in lines:
+                        line = line.strip()
+                        if line.startswith("HF_TOKEN="):
+                             # On prend tout après le =
+                             self_instance.amaz_token = line.split("=", 1)[1].strip().strip('"').strip("'")
+                             break
+                  if self_instance.amaz_token:
+                        print("Token Hugging Face found. " + self_instance.amaz_token)
+                        return {
+                            "success": True,
+                            "token": self_instance.amaz_token
+                        }
+                  else:
+                        print("No HF_TOKEN found.")
+                        return {
+                             "success": False,
+                             "token": None,
+                             "message": "HF_TOKEN missing"
+                        }
+             except Exception as e:
+                   print(f"Errot while readind .env : {e}")
+                   return {
+                       "success": False,
+                       "token": None,
+                       "message": "Error whild reading file"
+                   }
 
         #Take photo REST POST request
         @self.settings_app.post("/take_photo")
-        def take_photo():
+        def take_photo(self_instance: AmazonThisObject = Depends(self._get_self)):
             print("Take a photo")
             nonlocal last_photo, last_photo_timestamp
 
@@ -67,13 +142,18 @@ class AmazonThisObject(ReachyMiniApp):
 
         #Get link REST POST request
         @self.settings_app.post("/get_link")
-        def get_link():
+        def get_link(self_instance: AmazonThisObject = Depends(self._get_self)):
             #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".
+            hf_client = OpenAI(
+                 base_url="https://router.huggingface.co/v1",
+                 #define token in environment variable
+                 api_key=self_instance.amaz_token
+            )
             completion = hf_client.chat.completions.create(
                 model="zai-org/GLM-4.5V:novita",
                 messages=[

amazon_this_object/static/index.html

@@ -11,13 +11,17 @@
         <header>
             <h1>Amazon This Object</h1>
         </header>
-
-        <main>
+        
+        <section class="token-section">
+            <input type="text" id="hf_token" placeholder="Enter HuggingFace token" />
+            <button class="btn primary" id="apply_token" type="button">Submit</button>
+        </section>
+        
+        <main id="main_container">
             <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>
@@ -26,7 +30,6 @@
             <div class="status" id="status"></div>
         </main>
     </div>
-
     <script src="/static/main.js"></script>
 </body>
-</html>
+</html>

amazon_this_object/static/main.js

@@ -4,9 +4,75 @@ const takeBtn = document.getElementById('take-btn');
 const linkBtn = document.getElementById('link-btn');
 const amazonLink = document.getElementById('amazon_link');
 const status = document.getElementById('status');
+const apply_token = document.getElementById("apply_token")
+const hf_token = document.getElementById("hf_token")
 
 let currentFilename = null;
 
+HF_TOKEN = ""
+
+async function set_token() {
+    const token_value = hf_token.value.trim();  // On trim au cas où y'aurait des espaces de merde
+
+    if (!token_value) {
+        console.error("Token part is empty.");
+        return;
+    }
+
+    try {
+        const resp = await fetch('/set_token', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ token: token_value })  // Voilà, on envoie le token, putain !
+        });
+
+        const data = await resp.json();
+
+        if (data.success) {
+            main_container.style.display = 'block';
+            console.log("Token recorded :", data);
+            // Tu peux ajouter un message à l'UI ici si tu veux
+        } else {
+            console.error("Error :", data.message || data);
+        }
+    } catch (error) {
+        console.error("Network error :", error);
+    }
+}
+
+async function check_token()
+{
+    if( HF_TOKEN == "" )
+    {
+        const resp = await fetch('/check_token', { method: 'POST' });
+        const data = await resp.json();
+
+        console.log(data)
+
+        if( data.success )
+        {
+           main_container.style.display = 'block';
+           HF_TOKEN = data.token
+           hf_token.value = data.token
+           return true
+        }
+        else
+        {
+           main_container.style.display = 'none';
+           HF_TOKEN = ""
+           status.innerHTML = data.message
+           hf_token.value = ""
+           return false
+        }
+    }
+    else
+    {
+          return true
+    }
+}
+
 function validURL(str) {
   var pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
     '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name
@@ -77,3 +143,6 @@ async function takePhoto() {
 
 takeBtn.addEventListener('click', takePhoto);
 linkBtn.addEventListener('click', getLink);
+apply_token.addEventListener('click', set_token);
+
+check_token()

amazon_this_object/static/style.css

@@ -1,101 +1,91 @@
-: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;
-    }
-}
-
 * {
+    box-sizing: border-box;
     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);
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: #121212;
+    color: #e0e0e0;
     min-height: 100vh;
-    font-size: 1rem; /* Base pour les rem */
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .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;
+    width: 90%;
+    max-width: 500px;
+    background-color: #1e1e1e;
+    border-radius: 16px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+    overflow: hidden;
+    padding: 20px;
 }
 
 header {
     text-align: center;
-    margin-bottom: 1.5rem;
+    margin-bottom: 30px;
 }
 
-.logo {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.375rem;
-    margin-bottom: 0.25rem;
+h1 {
+    font-size: 2rem;
+    color: #ff9900; /* Orange Amazon, putain de classe */
+    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
 }
 
-.logo-icon {
-    width: 0.25rem;
-    height: 0.25rem;
-    background: var(--text);
-    border-radius: 50%;
+.token-section {
+    margin-bottom: 30px;
+    text-align: center;
 }
 
-.logo span {
-    font-size: 0.5625rem; /* 9px */
-    letter-spacing: 0.125rem;
-    color: var(--text-muted);
-    text-transform: uppercase;
+input[type="text"] {
+    width: 100%;
+    padding: 12px 16px;
+    margin-bottom: 15px;
+    background-color: #2d2d2d;
+    border: 1px solid #444;
+    border-radius: 8px;
+    color: #fff;
+    font-size: 1rem;
 }
 
-h1 {
-    font-size: 0.875rem; /* 14px */
-    font-weight: 500;
-    letter-spacing: 0.25rem;
-    text-transform: uppercase;
+input[type="text"]::placeholder {
+    color: #888;
 }
 
-main {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
+.btn {
+    padding: 12px 24px;
+    border: none;
+    border-radius: 8px;
+    font-size: 1rem;
+    font-weight: bold;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin: 10px 5px;
+}
+
+.btn.primary {
+    background-color: #ff9900;
+    color: #000;
+}
+
+.btn.primary:hover {
+    background-color: #ffb84d;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 10px rgba(255, 153, 0, 0.4);
 }
 
 .preview-container {
     position: relative;
-    background: var(--bg-secondary);
-    border: 1px solid var(--border);
-    border-radius: 0.5rem;
-    aspect-ratio: 4/3;
+    width: 100%;
+    height: 300px;
+    background-color: #000;
+    border-radius: 12px;
     overflow: hidden;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: border-color var(--transition);
-}
-
-.preview-container:hover {
-    border-color: var(--text-muted);
+    margin-bottom: 20px;
+    border: 2px solid #333;
 }
 
 #preview {
@@ -106,71 +96,58 @@ main {
 }
 
 .no-image {
-    font-size: 0.6875rem; /* 11px */
-    color: var(--text-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.0625rem;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 1.2rem;
+    color: #666;
 }
 
 .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);
+    justify-content: center;
+    flex-wrap: wrap;
+    margin-bottom: 20px;
 }
 
-.btn.primary:hover {
-    opacity: 0.9;
-    background: var(--text); /* Garde la couleur pour primary */
+.status {
+    text-align: center;
+    padding: 10px;
+    font-size: 1.1rem;
+    min-height: 30px;
 }
 
-.btn:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
+#amazon_link {
+    margin-top: 20px;
+    font-weight: bold;
+    word-break: break-all;
 }
 
-.btn:focus {
-    outline: none;
-    box-shadow: 0 0 0 0.125rem rgba(0, 0, 0, 0.2); /* Améliore l'accessibilité */
+#amazon_link a {
+    color: #ff9900;
+    text-decoration: none;
 }
 
-.status {
-    text-align: center;
-    font-size: 0.6875rem; /* 11px */
-    color: var(--text-muted);
-    min-height: 1rem;
+#amazon_link a:hover {
+    text-decoration: underline;
 }
 
-/* Media query pour plus de responsivité */
-@media (min-width: 48rem) { /* 768px */
+@media (max-width: 480px) {
     .container {
-        padding: 2rem;
+        padding: 15px;
     }
-
+    
     h1 {
-        font-size: 1rem;
+        font-size: 1.8rem;
+    }
+    
+    .btn {
+        width: 100%;
+        margin: 8px 0;
+    }
+    
+    .controls {
+        flex-direction: column;
     }
 }

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "amazon-this-object"
-version = "0.1.0"
+version = "0.1.1"
 description = "Get a link on Amazon, to buy a similar object you have."
 readme = "README.md"
 requires-python = ">=3.10"

style.css

@@ -48,7 +48,7 @@ body {
 }
 
 .container {
-	max-width: 640px;
+	max-width: 1200px;
 	margin: 0 auto;
 	padding: 0 2rem;
 	position: relative;
@@ -408,4 +408,4 @@ body {
 	.download-options {
 		grid-template-columns: 1fr;
 	}
-}
+}