Spaces:

philipp-zettl
/

food-dora

Running

App Files Files Community

philipp-zettl commited on 21 days ago

Commit

7745b3d

verified ·

1 Parent(s): 33afbf0

Add 3 files

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +318 -19
prompts.txt +0 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Food Dora
-emoji: 🏢
-colorFrom: red
 colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: food-dora
+emoji: 🐳
+colorFrom: gray
 colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,318 @@
-<!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>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Food Dora - Your Recipe Helper</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.3.2/uuid.min.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Poppins', sans-serif;
+            background-color: #f9f9f9;
+            height: 100vh;
+            overflow: hidden;
+        }
+        .message-bubble {
+            max-width: 80%;
+            word-wrap: break-word;
+        }
+        .user-message {
+            background-color: #4f46e5;
+            color: white;
+            border-radius: 18px 18px 0 18px;
+        }
+        .bot-message {
+            background-color: white;
+            color: #333;
+            border-radius: 18px 18px 18px 0;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .typing-indicator {
+            display: flex;
+            padding: 10px;
+        }
+        .typing-dot {
+            width: 8px;
+            height: 8px;
+            background-color: #999;
+            border-radius: 50%;
+            margin: 0 2px;
+            animation: typing 1.4s infinite ease-in-out;
+        }
+        .typing-dot:nth-child(1) {
+            animation-delay: 0s;
+        }
+        .typing-dot:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+        .typing-dot:nth-child(3) {
+            animation-delay: 0.4s;
+        }
+        @keyframes typing {
+            0%, 60%, 100% {
+                transform: translateY(0);
+            }
+            30% {
+                transform: translateY(-5px);
+            }
+        }
+        .suggestions {
+            display: flex;
+            overflow-x: auto;
+            padding: 10px 0;
+            gap: 8px;
+        }
+        .suggestion-chip {
+            background-color: #e0e7ff;
+            color: #4f46e5;
+            border-radius: 20px;
+            padding: 8px 16px;
+            font-size: 14px;
+            white-space: nowrap;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        .suggestion-chip:hover {
+            background-color: #c7d2fe;
+        }
+        .recipe-card {
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        }
+        .recipe-image {
+            height: 180px;
+            background-size: cover;
+            background-position: center;
+        }
+    </style>
+</head>
+<body class="flex flex-col h-screen">
+    <!-- Header -->
+    <header class="bg-indigo-600 text-white p-4 shadow-md">
+        <div class="flex items-center justify-between">
+            <div class="flex items-center">
+                <i class="fas fa-utensils text-2xl mr-3"></i>
+                <h1 class="text-xl font-bold">Food Dora</h1>
+            </div>
+        </div>
+    </header>
+    <!-- Chat Container -->
+    <div id="chat-container" class="flex-1 overflow-y-auto p-4 space-y-4">
+        <!-- Welcome Message -->
+        <div class="flex items-start">
+            <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
+                <i class="fas fa-robot text-indigo-600"></i>
+            </div>
+            <div class="message-bubble bot-message p-4">
+                <p>Hi there! 👋 I'm Food Dora, your personal recipe helper. What would you like to cook today?</p>
+                <div class="suggestions mt-2">
+                    <div class="suggestion-chip" onclick="sendSuggestion(this)">Quick dinner ideas</div>
+                    <div class="suggestion-chip" onclick="sendSuggestion(this)">Vegetarian recipes</div>
+                    <div class="suggestion-chip" onclick="sendSuggestion(this)">Low-carb meals</div>
+                    <div class="suggestion-chip" onclick="sendSuggestion(this)">Dessert recipes</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Input Area -->
+    <div class="p-4 border-t border-gray-200 bg-white">
+        <div class="flex items-center">
+            <input
+                id="user-input"
+                type="text"
+                placeholder="Type your recipe request..."
+                class="flex-1 border border-gray-300 rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                onkeypress="handleKeyPress(event)"
+            >
+            <button
+                id="send-btn"
+                class="ml-2 bg-indigo-600 text-white rounded-full p-2 w-12 h-12 flex items-center justify-center focus:outline-none hover:bg-indigo-700 transition"
+                onclick="sendMessage()"
+            >
+                <i class="fas fa-paper-plane"></i>
+            </button>
+        </div>
+    </div>
+    <script>
+        // Generate a UUID for the session
+        const sessionId = uuid.v4();
+        // DOM elements
+        const chatContainer = document.getElementById('chat-container');
+        const userInput = document.getElementById('user-input');
+        const sendBtn = document.getElementById('send-btn');
+        // API configuration
+        const API_URL = 'https://api-controller.easybits.tech/api/392';
+        const AUTH_TOKEN = 'Bearer 5390f593-db0c-4611-82ee-f1d4ede82467';
+        // Show typing indicator
+        function showTypingIndicator() {
+            const typingDiv = document.createElement('div');
+            typingDiv.className = 'flex items-start';
+            typingDiv.innerHTML = `
+                <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
+                    <i class="fas fa-robot text-indigo-600"></i>
+                </div>
+                <div class="message-bubble bot-message p-3">
+                    <div class="typing-indicator">
+                        <div class="typing-dot"></div>
+                        <div class="typing-dot"></div>
+                        <div class="typing-dot"></div>
+                    </div>
+                </div>
+            `;
+            chatContainer.appendChild(typingDiv);
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+            return typingDiv;
+        }
+        // Remove typing indicator
+        function removeTypingIndicator(indicator) {
+            if (indicator && indicator.parentNode) {
+                indicator.parentNode.removeChild(indicator);
+            }
+        }
+        // Add user message to chat
+        function addUserMessage(text) {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = 'flex items-start justify-end';
+            messageDiv.innerHTML = `
+                <div class="message-bubble user-message p-4">
+                    <p>${text}</p>
+                </div>
+                <div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center ml-3">
+                    <i class="fas fa-user text-white"></i>
+                </div>
+            `;
+            chatContainer.appendChild(messageDiv);
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        }
+        // Add bot message to chat
+        function addBotMessage(text) {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = 'flex items-start';
+            const printText = text.replaceAll("\n", "<br/>");
+            messageDiv.innerHTML = `
+                <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
+                    <i class="fas fa-robot text-indigo-600"></i>
+                </div>
+                <div class="message-bubble bot-message p-4">
+                    <p>${printText}</p>
+                </div>
+            `;
+            chatContainer.appendChild(messageDiv);
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        }
+        // Send message to API
+        async function sendMessage() {
+            const message = userInput.value.trim();
+            if (!message) return;
+            addUserMessage(message);
+            userInput.value = '';
+            const typingIndicator = showTypingIndicator();
+            try {
+                const payload = {
+                    message: {
+                        recipient_id: sessionId,
+                        text: message
+                    },
+                    timestamp: Math.floor(Date.now() / 1000)
+                };
+                const response = await fetch(API_URL, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Authorization': AUTH_TOKEN
+                    },
+                    body: JSON.stringify(payload)
+                });
+                const data = await response.json();
+                removeTypingIndicator(typingIndicator);
+                if (data && data.message.data) {
+                    addBotMessage(data.message.data);
+                } else {
+                    addBotMessage("I couldn't process your request. Could you try again?");
+                }
+            } catch (error) {
+                removeTypingIndicator(typingIndicator);
+                addBotMessage("Oops! Something went wrong. Please check your connection and try again.");
+                console.error('Error:', error);
+            }
+        }
+        // Handle Enter key press
+        function handleKeyPress(event) {
+            if (event.key === 'Enter') {
+                sendMessage();
+            }
+        }
+        // Send suggestion message
+        function sendSuggestion(element) {
+            const suggestion = element.textContent;
+            userInput.value = suggestion;
+            sendMessage();
+        }
+        // Example of how to handle recipe cards (you would parse API response to create these)
+        function addRecipeCard(recipe) {
+            const cardDiv = document.createElement('div');
+            cardDiv.className = 'flex items-start mb-4';
+            cardDiv.innerHTML = `
+                <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
+                    <i class="fas fa-robot text-indigo-600"></i>
+                </div>
+                <div class="message-bubble bot-message p-0 w-full">
+                    <div class="recipe-card">
+                        <div class="recipe-image" style="background-image: url('${recipe.image}')"></div>
+                        <div class="p-4">
+                            <h3 class="font-bold text-lg mb-2">${recipe.title}</h3>
+                            <div class="flex items-center text-sm text-gray-600 mb-2">
+                                <i class="fas fa-clock mr-1"></i>
+                                <span class="mr-3">${recipe.time}</span>
+                                <i class="fas fa-utensils mr-1"></i>
+                                <span>${recipe.servings}</span>
+                            </div>
+                            <p class="text-sm mb-3">${recipe.description}</p>
+                            <button class="text-indigo-600 font-medium text-sm">View Full Recipe</button>
+                        </div>
+                    </div>
+                </div>
+            `;
+            chatContainer.appendChild(cardDiv);
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        }
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=philipp-zettl/food-dora" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

File without changes