Spaces:

maxxxi100
/

My_health_chatbot

Sleeping

App Files Files Community

maxxxi100 commited on 8 days ago

Commit

20143fb

verified ·

1 Parent(s): babc7aa

Update My_health.html

Browse files

Files changed (1) hide show

My_health.html +219 -29

My_health.html CHANGED Viewed

@@ -15,8 +15,93 @@
         h1 {
             color: #005a9c;
         }
         /* Estils del contenidor del xat */
         #chat-container {
             position: fixed;
@@ -110,13 +195,32 @@
 </head>
 <body>
     <h1>Benvingut a My Health Dashboard</h1>
-    <p>Aquí pots interactuar amb el teu assistent virtual.</p>
     <!-- Contenidor del chat flotante -->
     <div id="chat-container">
         <div id="chat-messages">
             <!-- Missatge de benvinguda inicial -->
-            <div class="message bot">Hola Max 000! Soc un assistent virtual de salut basat en IA. Com et puc ajudar avui?</div>
         </div>
         <div id="chat-input">
             <input type="text" id="user-input" placeholder="Escriu el teu missatge..." />
@@ -125,14 +229,29 @@
     </div>
     <script>
         const chatMessages = document.getElementById('chat-messages');
         const userInput = document.getElementById('user-input');
         const sendBtn = document.getElementById('send-btn');
-        // Defineix el prompt del sistema per a l'assistent de salut
-        const systemPrompt = "Ets un assistent de salut virtual anomenat 'My Health Assistant'. Respon sempre en català. Sigues amable, professional i concís. El teu propòsit és ajudar els usuaris amb preguntes generals de salut. No proporcionis diagnòstics mèdics ni consells mèdics específics. L'usuari amb qui parles es diu 'Max 000'.";
-        // Manté un historial de la conversa
         let chatHistory = [
             {
                 role: "user",
@@ -140,15 +259,14 @@
             },
             {
                 role: "model",
-                parts: [{ text: "Hola Max 000! Soc un assistent virtual de salut basat en IA. Com et puc ajudar avui?" }]
             }
         ];
         /**
          * Afegeix un missatge a la finestra del xat
-         * @param {string} text - El text del missatge
-         * @param {string} type - 'user', 'bot', o 'loading'
-         * @returns {HTMLElement} - L'element del missatge creat
          */
         function appendMessage(text, type = 'bot') {
             const msgDiv = document.createElement('div');
@@ -160,35 +278,29 @@
         }
         /**
-         * Envia el missatge de l'usuari i gestiona la resposta de la IA
          */
         async function handleSend() {
             const text = userInput.value.trim();
             if (!text) return;
-            // Afegeix el missatge de l'usuari a la UI i a l'historial
             appendMessage(text, 'user');
             chatHistory.push({ role: "user", parts: [{ text: text }] });
             userInput.value = '';
-            // Mostra un indicador de "escrivint..."
             const loadingMsg = appendMessage("...", 'loading');
             sendBtn.disabled = true;
             try {
-                // Truca a l'API de Gemini
-                const botResponse = await callGeminiAPI(chatHistory);
-                // Elimina l'indicador de "escrivint..."
                 chatMessages.removeChild(loadingMsg);
-                // Afegeix la resposta del bot a la UI i a l'historial
                 appendMessage(botResponse, 'bot');
                 chatHistory.push({ role: "model", parts: [{ text: botResponse }] });
             } catch (error) {
-                // Gestiona errors
-                console.error("Error a l'API de Gemini:", error);
                 chatMessages.removeChild(loadingMsg);
                 appendMessage("Ho sento, he tingut un problema. Intenta-ho de nou.", 'bot');
             } finally {
@@ -197,19 +309,72 @@
             }
         }
         /**
-         * Truca a l'API de Gemini amb reintents (exponential backoff)
-         * @param {Array} history - L'historial de la conversa
          * @returns {Promise<string>} - La resposta de text del model
          */
-        async function callGeminiAPI(history) {
             const apiKey = ""; // L'API key es gestionarà automàticament
             const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`;
             const payload = {
                 contents: history,
                 systemInstruction: {
-                    parts: [{ text: systemPrompt }]
                 },
                 // Opcional: eines de cerca per a informació actualitzada
                 // tools: [{ "google_search": {} }],
@@ -233,7 +398,16 @@
                         if (candidate && candidate.content?.parts?.[0]?.text) {
                             return candidate.content.parts[0].text;
                         } else {
-                            throw new Error("Resposta invàlida de l'API");
                         }
                     } else if (response.status === 429 || response.status >= 500) {
                         // Error de límit de taxa o error del servidor, reintentar
@@ -251,17 +425,32 @@
                     if (retries >= maxRetries) {
                         throw error; // Llança l'error després de l'últim reintent
                     }
-                    // Espera exponencial (1s, 2s, 4s, 8s, 16s)
-                    const delay = Math.pow(2, retries - 1) * 1000 + Math.random() * 1000;
                     await new Promise(resolve => setTimeout(resolve, delay));
                 }
             }
-            // Aquest punt només s'assoleix si tots els reintents fallen
             throw new Error("No s'ha pogut obtenir resposta de l'API després de diversos intents.");
         }
-        // Esdeveniments per enviar missatge
         sendBtn.addEventListener('click', handleSend);
         userInput.addEventListener('keydown', e => {
             if (e.key === 'Enter') {
@@ -272,3 +461,4 @@
     </script>
 </body>
 </html>

         h1 {
             color: #005a9c;
+            text-align: center;
         }
+        /* Contenidor principal per als ginys */
+        main {
+            max-width: 900px;
+            margin: 20px auto;
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 20px;
+        }
+        @media (min-width: 768px) {
+            main {
+                grid-template-columns: 1fr 1fr;
+            }
+        }
+        /* Estil de les targetes de giny */
+        .widget-card {
+            background: #fff;
+            border-radius: 12px;
+            padding: 20px 25px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+        }
+        .widget-card h2 {
+            color: #004a80;
+            margin-top: 0;
+            border-bottom: 2px solid #e9ecef;
+            padding-bottom: 10px;
+        }
+        .widget-card p {
+            font-size: 15px;
+            color: #555;
+            line-height: 1.5;
+        }
+        .widget-card textarea {
+            width: 100%;
+            min-height: 120px;
+            border: 1px solid #ccc;
+            border-radius: 8px;
+            padding: 10px;
+            font-size: 15px;
+            font-family: inherit;
+            margin-bottom: 10px;
+            box-sizing: border-box; /* Assegura que el padding no afecti l'amplada */
+        }
+        .widget-card button {
+            display: inline-block;
+            width: 100%;
+            padding: 12px 18px;
+            font-size: 16px;
+            font-weight: 600;
+            border: none;
+            background-color: #007bff;
+            color: white;
+            cursor: pointer;
+            border-radius: 8px;
+            transition: background-color 0.3s ease;
+        }
+        .widget-card button:hover {
+            background-color: #0056b3;
+        }
+        /* Caixa de resultats */
+        .result-box {
+            margin-top: 15px;
+            padding: 15px;
+            background-color: #f8f9fa;
+            border-radius: 8px;
+            border: 1px solid #e9ecef;
+            min-height: 50px;
+            line-height: 1.6;
+            white-space: pre-wrap; /* Respecta els salts de línia */
+        }
+        .result-box .loading {
+            font-style: italic;
+            color: #777;
+        }
         /* Estils del contenidor del xat */
         #chat-container {
             position: fixed;
 </head>
 <body>
     <h1>Benvingut a My Health Dashboard</h1>
+    <!-- Nous ginys amb IA -->
+    <main>
+        <div class="widget-card">
+            <h2>✨ Generador de Benestar</h2>
+            <p>Demana un pla de menjars, una rutina d'exercicis, o consells de mindfulness.</p>
+            <textarea id="wellness-prompt" rows="5" placeholder="Ex: Un pla de sopars saludable i ràpid per a 3 dies..."></textarea>
+            <button id="generate-wellness-btn">Generar Pla</button>
+            <div id="wellness-result" class="result-box"></div>
+        </div>
+        <div class="widget-card">
+            <h2>✨ Resumidor de Textos de Salut</h2>
+            <p>Enganxa un article o text mèdic complicat per obtenir un resum senzill.</p>
+            <textarea id="text-to-summarize" rows="5" placeholder="Enganxa el text aquí..."></textarea>
+            <button id="summarize-text-btn">Resumir Text</button>
+            <div id="summarize-result" class="result-box"></div>
+        </div>
+    </main>
     <!-- Contenidor del chat flotante -->
     <div id="chat-container">
         <div id="chat-messages">
             <!-- Missatge de benvinguda inicial -->
+            <div class="message bot">Hola Max 000! Soc un assistent virtual. Fes-me una pregunta o utilitza les eines de la pàgina.</div>
         </div>
         <div id="chat-input">
             <input type="text" id="user-input" placeholder="Escriu el teu missatge..." />
     </div>
     <script>
+        // --- Elements del Xat ---
         const chatMessages = document.getElementById('chat-messages');
         const userInput = document.getElementById('user-input');
         const sendBtn = document.getElementById('send-btn');
+        // --- Elements del Giny de Benestar ---
+        const wellnessPromptEl = document.getElementById('wellness-prompt');
+        const generateWellnessBtn = document.getElementById('generate-wellness-btn');
+        const wellnessResultEl = document.getElementById('wellness-result');
+        // --- Elements del Giny de Resum ---
+        const textToSummarizeEl = document.getElementById('text-to-summarize');
+        const summarizeTextBtn = document.getElementById('summarize-text-btn');
+        const summarizeResultEl = document.getElementById('summarize-result');
+        // --- Prompts del Sistema per a Gemini ---
+        const chatSystemPrompt = "Ets un assistent de salut virtual anomenat 'My Health Assistant'. Respon sempre en català. Sigues amable, professional i concís. El teu propòsit és ajudar els usuaris amb preguntes generals de salut. No proporcionis diagnòstics mèdics ni consells mèdics específics. L'usuari amb qui parles es diu 'Max 000'.";
+        const wellnessSystemPrompt = "Ets un expert en benestar, nutrició i fitness. Respon sempre en català. La teva tasca és generar plans de menjars, rutines d'exercici o consells de mindfulness basats en la petició de l'usuari. Sigues encoratjador i clar. No proporcionis consells mèdics ni diagnòstics.";
+        const summarizeSystemPrompt = "Ets un expert en comunicació sanitària. La teva única tasca és agafar el text proporcionat per l'usuari i resumir-lo en català planer, senzill i fàcil d'entendre. Fes-ho en punts clau o un paràgraf curt. No afegeixis informació nova. Basa't només en el text proporcionat.";
+        // --- Historial del Xat ---
         let chatHistory = [
             {
                 role: "user",
             },
             {
                 role: "model",
+                parts: [{ text: "Hola Max 000! Soc un assistent virtual. Fes-me una pregunta o utilitza les eines de la pàgina." }]
             }
         ];
+        // --- Lògica del Xat ---
         /**
          * Afegeix un missatge a la finestra del xat
          */
         function appendMessage(text, type = 'bot') {
             const msgDiv = document.createElement('div');
         }
         /**
+         * Envia el missatge de l'usuari i gestiona la resposta de la IA del xat
          */
         async function handleSend() {
             const text = userInput.value.trim();
             if (!text) return;
             appendMessage(text, 'user');
             chatHistory.push({ role: "user", parts: [{ text: text }] });
             userInput.value = '';
             const loadingMsg = appendMessage("...", 'loading');
             sendBtn.disabled = true;
             try {
+                // Truca a l'API de Gemini amb l'historial del xat i el prompt del sistema del xat
+                const botResponse = await callGeminiAPI(chatHistory, chatSystemPrompt);
                 chatMessages.removeChild(loadingMsg);
                 appendMessage(botResponse, 'bot');
                 chatHistory.push({ role: "model", parts: [{ text: botResponse }] });
             } catch (error) {
+                console.error("Error a l'API de Gemini (Xat):", error);
                 chatMessages.removeChild(loadingMsg);
                 appendMessage("Ho sento, he tingut un problema. Intenta-ho de nou.", 'bot');
             } finally {
             }
         }
+        // --- Lògica dels Ginys ---
+        // Giny de Benestar
+        generateWellnessBtn.addEventListener('click', async () => {
+            const prompt = wellnessPromptEl.value.trim();
+            if (!prompt) {
+                wellnessResultEl.textContent = "Si us plau, escriu què necessites.";
+                return;
+            }
+            wellnessResultEl.innerHTML = '<p class="loading">Generant el teu pla...</p>';
+            generateWellnessBtn.disabled = true;
+            try {
+                // Creem un "historial" temporal només per a aquesta trucada
+                const tempHistory = [{ role: "user", parts: [{ text: prompt }] }];
+                // Truquem a l'API amb el prompt de l'usuari i el system prompt de benestar
+                const result = await callGeminiAPI(tempHistory, wellnessSystemPrompt);
+                wellnessResultEl.innerHTML = formatResponse(result);
+            } catch (error) {
+                console.error("Error a l'API de Gemini (Benestar):", error);
+                wellnessResultEl.textContent = "Error en generar el pla. Intenta-ho de nou.";
+            } finally {
+                generateWellnessBtn.disabled = false;
+            }
+        });
+        // Giny de Resum
+        summarizeTextBtn.addEventListener('click', async () => {
+            const textToSummarize = textToSummarizeEl.value.trim();
+            if (!textToSummarize) {
+                summarizeResultEl.textContent = "Si us plau, enganxa el text que vols resumir.";
+                return;
+            }
+            summarizeResultEl.innerHTML = '<p class="loading">Resumint text...</p>';
+            summarizeTextBtn.disabled = true;
+            try {
+                // El prompt de l'usuari és el text que vol resumir
+                const tempHistory = [{ role: "user", parts: [{ text: textToSummarize }] }];
+                // Truquem a l'API amb el text i el system prompt de resum
+                const result = await callGeminiAPI(tempHistory, summarizeSystemPrompt);
+                summarizeResultEl.innerHTML = formatResponse(result);
+            } catch (error) {
+                console.error("Error a l'API de Gemini (Resum):", error);
+                summarizeResultEl.textContent = "Error en resumir el text. Intenta-ho de nou.";
+            } finally {
+                summarizeTextBtn.disabled = false;
+            }
+        });
         /**
+         * Funció genèrica per trucar a l'API de Gemini amb reintents (exponential backoff)
+         * @param {Array} history - L'historial de la conversa (o un prompt temporal)
+         * @param {string} systemInstructionText - El prompt del sistema a utilitzar
          * @returns {Promise<string>} - La resposta de text del model
          */
+        async function callGeminiAPI(history, systemInstructionText) {
             const apiKey = ""; // L'API key es gestionarà automàticament
             const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`;
             const payload = {
                 contents: history,
                 systemInstruction: {
+                    parts: [{ text: systemInstructionText }]
                 },
                 // Opcional: eines de cerca per a informació actualitzada
                 // tools: [{ "google_search": {} }],
                         if (candidate && candidate.content?.parts?.[0]?.text) {
                             return candidate.content.parts[0].text;
                         } else {
+                            // Gestionar contingut bloquejat o resposta buida
+                            let errorMsg = "La resposta ha estat bloquejada o estava buida.";
+                            if (candidate?.finishReason) {
+                                errorMsg += ` Motiu: ${candidate.finishReason}`;
+                            }
+                            if (result.promptFeedback?.blockReason) {
+                                 errorMsg += ` (Feedback: ${result.promptFeedback.blockReason})`;
+                            }
+                            console.warn("Resposta invàlida de l'API:", result);
+                            return errorMsg;
                         }
                     } else if (response.status === 429 || response.status >= 500) {
                         // Error de límit de taxa o error del servidor, reintentar
                     if (retries >= maxRetries) {
                         throw error; // Llança l'error després de l'últim reintent
                     }
+                    // Espera exponencial (1s, 2s, 4s, 8s)
+                    const delay = Math.pow(2, retries) * 1000 + Math.random() * 1000;
                     await new Promise(resolve => setTimeout(resolve, delay));
                 }
             }
             throw new Error("No s'ha pogut obtenir resposta de l'API després de diversos intents.");
         }
+        /**
+         * Formata la resposta de text (substitueix \n per <br>)
+         * @param {string} text - Text pla
+         * @returns {string} - Text HTML formatat
+         */
+        function formatResponse(text) {
+            // Escapa HTML bàsic per seguretat abans de fer reemplaços
+            let safeText = text.replace(/</g, "&lt;").replace(/>/g, "&gt;");
+            // Converteix negreta simple de markdown
+            safeText = safeText.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+            // Converteix salts de línia
+            safeText = safeText.replace(/\n/g, '<br>');
+            return safeText;
+        }
+        // --- Esdeveniments del Xat ---
         sendBtn.addEventListener('click', handleSend);
         userInput.addEventListener('keydown', e => {
             if (e.key === 'Enter') {
     </script>
 </body>
 </html>