Spaces:

maomaobj
/

home3

Running

App Files Files Community

maomaobj commited on Jul 9, 2025

Commit

3ea6e3d

verified ·

1 Parent(s): 29fc693

Design a WeChat mini program UI page for a smart home assistant chat interface, named "问管家". The assistant helps users solve issues with household appliances and furniture. Layout: 1. Top greeting section with avatar and welcome text: "Hi，有什么想问智能管家的吗？" 2. Main conversation area with alternating chat bubbles (user on right, AI assistant on left) 3. Each AI response supports: - Multi-step text answers - Embedded icons or small illustrations - Follow-up suggestion buttons ("预约上门", "购买耗材", "猜你还想问") 4. Bottom input bar includes: - Text input - Voice button - Submit icon Style: - Clean, modern chat layout - White/light background with soft shadow cards - Warm tones for assistant replies - Rounded corners, bubble UI - Consistent with previous page color palette Add quick-access history above input area. - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +402 -19

README.md CHANGED Viewed

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

 ---
+title: home3
+emoji: 🐳
+colorFrom: pink
+colorTo: purple
 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,402 @@
-<!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="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>问管家 - 智能家居助手</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">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
+        body {
+            font-family: 'Noto Sans SC', sans-serif;
+            background-color: #f5f5f5;
+        }
+        .chat-bubble-ai {
+            background: linear-gradient(135deg, #fff9f0 0%, #fff0e0 100%);
+            border-radius: 18px 18px 18px 4px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+        }
+        .chat-bubble-user {
+            background: linear-gradient(135deg, #e6f7ff 0%, #d0ebff 100%);
+            border-radius: 18px 18px 4px 18px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+        }
+        .suggestion-btn {
+            transition: all 0.2s ease;
+        }
+        .suggestion-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+        }
+        .appliance-icon {
+            width: 40px;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 12px;
+            background: rgba(255,255,255,0.7);
+            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+        }
+        .history-chip {
+            transition: all 0.2s ease;
+            cursor: pointer;
+        }
+        .history-chip:hover {
+            background-color: #e6f7ff;
+            transform: scale(1.05);
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { opacity: 0.5; }
+            50% { opacity: 1; }
+            100% { opacity: 0.5; }
+        }
+        .typing-indicator span {
+            animation: bounce 1.5s infinite;
+            display: inline-block;
+        }
+        .typing-indicator span:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+        .typing-indicator span:nth-child(3) {
+            animation-delay: 0.4s;
+        }
+        @keyframes bounce {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-5px); }
+        }
+    </style>
+</head>
+<body class="flex flex-col h-screen bg-gray-50">
+    <!-- Header Section -->
+    <header class="bg-white py-4 px-4 shadow-sm">
+        <div class="flex items-center">
+            <div class="w-12 h-12 rounded-full bg-gradient-to-r from-amber-400 to-orange-400 flex items-center justify-center text-white text-xl">
+                <i class="fas fa-home"></i>
+            </div>
+            <div class="ml-3">
+                <h1 class="text-lg font-bold text-gray-800">问管家</h1>
+                <p class="text-sm text-gray-500">Hi，有什么想问智能管家的吗？</p>
+            </div>
+        </div>
+    </header>
+    <!-- Main Chat Area -->
+    <main class="flex-1 overflow-y-auto p-4 pb-20" id="chatContainer">
+        <!-- Initial greeting message -->
+        <div class="flex mb-4">
+            <div class="w-10 h-10 rounded-full bg-gradient-to-r from-amber-400 to-orange-400 flex items-center justify-center text-white flex-shrink-0">
+                <i class="fas fa-robot"></i>
+            </div>
+            <div class="ml-3 max-w-[80%]">
+                <div class="chat-bubble-ai px-4 py-3">
+                    <p class="text-gray-800">您好！我是您的智能家居管家，随时为您解决家电、家具问题。请问今天有什么需要帮助的吗？</p>
+                </div>
+                <div class="flex flex-wrap gap-2 mt-2">
+                    <button class="suggestion-btn bg-gradient-to-r from-amber-400 to-orange-400 text-white text-xs px-3 py-1.5 rounded-full">
+                        空调不制冷
+                    </button>
+                    <button class="suggestion-btn bg-gradient-to-r from-amber-400 to-orange-400 text-white text-xs px-3 py-1.5 rounded-full">
+                        洗衣机漏水
+                    </button>
+                    <button class="suggestion-btn bg-gradient-to-r from-amber-400 to-orange-400 text-white text-xs px-3 py-1.5 rounded-full">
+                        电视无信号
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Example conversation -->
+        <div class="flex justify-end mb-4">
+            <div class="max-w-[80%]">
+                <div class="chat-bubble-user px-4 py-3">
+                    <p class="text-gray-800">我家的冰箱最近声音很大，是什么原因？</p>
+                </div>
+            </div>
+        </div>
+        <div class="flex mb-4">
+            <div class="w-10 h-10 rounded-full bg-gradient-to-r from-amber-400 to-orange-400 flex items-center justify-center text-white flex-shrink-0">
+                <i class="fas fa-robot"></i>
+            </div>
+            <div class="ml-3 max-w-[80%]">
+                <div class="chat-bubble-ai px-4 py-3">
+                    <p class="text-gray-800 mb-2">冰箱噪音大可能有以下几个原因：</p>
+                    <div class="flex items-center mb-2">
+                        <div class="appliance-icon mr-2 text-orange-500">
+                            <i class="fas fa-fan"></i>
+                        </div>
+                        <p class="text-gray-800">1. 压缩机风扇有异物或灰尘积累</p>
+                    </div>
+                    <div class="flex items-center mb-2">
+                        <div class="appliance-icon mr-2 text-orange-500">
+                            <i class="fas fa-cube"></i>
+                        </div>
+                        <p class="text-gray-800">2. 冰箱放置不平稳产生共振</p>
+                    </div>
+                    <div class="flex items-center">
+                        <div class="appliance-icon mr-2 text-orange-500">
+                            <i class="fas fa-snowflake"></i>
+                        </div>
+                        <p class="text-gray-800">3. 制冷剂流动声音（正常现象）</p>
+                    </div>
+                </div>
+                <div class="mt-3">
+                    <p class="text-xs text-gray-500 mb-2">建议操作：</p>
+                    <div class="flex flex-wrap gap-2">
+                        <button class="suggestion-btn bg-gradient-to-r from-amber-400 to-orange-400 text-white text-xs px-3 py-1.5 rounded-full">
+                            查看解决步骤
+                        </button>
+                        <button class="suggestion-btn bg-white border border-orange-300 text-orange-500 text-xs px-3 py-1.5 rounded-full">
+                            预约上门
+                        </button>
+                        <button class="suggestion-btn bg-white border border-orange-300 text-orange-500 text-xs px-3 py-1.5 rounded-full">
+                            购买耗材
+                        </button>
+                    </div>
+                </div>
+                <div class="mt-3">
+                    <p class="text-xs text-gray-500 mb-2">猜你还想问：</p>
+                    <div class="flex flex-wrap gap-2">
+                        <button class="suggestion-btn bg-gray-100 text-gray-700 text-xs px-3 py-1.5 rounded-full">
+                            如何清洁冰箱？
+                        </button>
+                        <button class="suggestion-btn bg-gray-100 text-gray-700 text-xs px-3 py-1.5 rounded-full">
+                            冰箱温度设置
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Typing indicator example -->
+        <div class="flex mb-4 hidden" id="typingIndicator">
+            <div class="w-10 h-10 rounded-full bg-gradient-to-r from-amber-400 to-orange-400 flex items-center justify-center text-white flex-shrink-0">
+                <i class="fas fa-robot"></i>
+            </div>
+            <div class="ml-3 max-w-[80%]">
+                <div class="chat-bubble-ai px-4 py-3">
+                    <div class="typing-indicator">
+                        <span>•</span>
+                        <span>•</span>
+                        <span>•</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <!-- Quick Access History -->
+    <div class="px-4 py-2 bg-white border-t border-gray-200">
+        <div class="flex overflow-x-auto pb-2 space-x-2 hide-scrollbar">
+            <div class="history-chip bg-gray-100 text-gray-700 text-xs px-3 py-1.5 rounded-full whitespace-nowrap">
+                空调清洗服务
+            </div>
+            <div class="history-chip bg-gray-100 text-gray-700 text-xs px-3 py-1.5 rounded-full whitespace-nowrap">
+                智能锁设置
+            </div>
+            <div class="history-chip bg-gray-100 text-gray-700 text-xs px-3 py-1.5 rounded-full whitespace-nowrap">
+                洗衣机故障E3
+            </div>
+            <div class="history-chip bg-gray-100 text-gray-700 text-xs px-3 py-1.5 rounded-full whitespace-nowrap">
+                电视投屏方法
+            </div>
+            <div class="history-chip bg-gray-100 text-gray-700 text-xs px-3 py-1.5 rounded-full whitespace-nowrap">
+                净水器滤芯更换
+            </div>
+        </div>
+    </div>
+    <!-- Input Area -->
+    <footer class="bg-white border-t border-gray-200 p-3">
+        <div class="flex items-center">
+            <button class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 mr-2">
+                <i class="fas fa-plus"></i>
+            </button>
+            <div class="flex-1 bg-gray-100 rounded-full flex items-center px-3">
+                <input
+                    type="text"
+                    id="messageInput"
+                    placeholder="输入您的问题..."
+                    class="flex-1 bg-transparent py-2 text-gray-700 focus:outline-none"
+                >
+                <button class="text-gray-400 hover:text-gray-600 p-2">
+                    <i class="far fa-smile"></i>
+                </button>
+            </div>
+            <button id="voiceButton" class="w-10 h-10 rounded-full bg-gradient-to-r from-amber-400 to-orange-400 flex items-center justify-center text-white ml-2">
+                <i class="fas fa-microphone"></i>
+            </button>
+            <button id="sendButton" class="w-10 h-10 rounded-full bg-gradient-to-r from-amber-400 to-orange-400 flex items-center justify-center text-white ml-2">
+                <i class="fas fa-paper-plane"></i>
+            </button>
+        </div>
+    </footer>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const chatContainer = document.getElementById('chatContainer');
+            const messageInput = document.getElementById('messageInput');
+            const sendButton = document.getElementById('sendButton');
+            const voiceButton = document.getElementById('voiceButton');
+            const typingIndicator = document.getElementById('typingIndicator');
+            // Scroll to bottom of chat
+            function scrollToBottom() {
+                chatContainer.scrollTop = chatContainer.scrollHeight;
+            }
+            // Add a new message to the chat
+            function addMessage(text, isUser = true) {
+                const messageDiv = document.createElement('div');
+                messageDiv.classList.add('flex', 'mb-4');
+                if (isUser) {
+                    messageDiv.classList.add('justify-end');
+                    messageDiv.innerHTML = `
+                        <div class="max-w-[80%]">
+                            <div class="chat-bubble-user px-4 py-3">
+                                <p class="text-gray-800">${text}</p>
+                            </div>
+                        </div>
+                    `;
+                } else {
+                    messageDiv.innerHTML = `
+                        <div class="w-10 h-10 rounded-full bg-gradient-to-r from-amber-400 to-orange-400 flex items-center justify-center text-white flex-shrink-0">
+                            <i class="fas fa-robot"></i>
+                        </div>
+                        <div class="ml-3 max-w-[80%]">
+                            <div class="chat-bubble-ai px-4 py-3">
+                                <p class="text-gray-800">${text}</p>
+                            </div>
+                        </div>
+                    `;
+                }
+                chatContainer.appendChild(messageDiv);
+                scrollToBottom();
+            }
+            // Simulate AI response
+            function simulateAIResponse(userMessage) {
+                // Show typing indicator
+                typingIndicator.classList.remove('hidden');
+                scrollToBottom();
+                // Hide typing indicator after delay and show response
+                setTimeout(() => {
+                    typingIndicator.classList.add('hidden');
+                    // Simple response based on keywords
+                    let response = "我理解您的问题了，让我为您查找最佳解决方案...";
+                    if (userMessage.includes('空调') || userMessage.includes('冷气')) {
+                        response = "关于空调问题，可能是滤网堵塞或制冷剂不足。建议先清洁滤网，如果问题持续，可能需要专业检修。需要我为您预约上门服务吗？";
+                    } else if (userMessage.includes('冰箱') || userMessage.includes('冷藏')) {
+                        response = "冰箱问题通常与温度设置或密封条有关。请检查密封条是否完好，并确保温度设置在2-8℃之间。需要更详细的指导吗？";
+                    } else if (userMessage.includes('洗衣机') || userMessage.includes('洗衣')) {
+                        response = "洗衣机异常可能是由于不平衡��载或排水管堵塞。请尝试重新分布衣物并检查排水管。这里有详细的故障排除指南。";
+                    }
+                    addMessage(response, false);
+                    // Add suggestion buttons
+                    const aiMessageDiv = chatContainer.lastElementChild;
+                    const responseContainer = aiMessageDiv.querySelector('.ml-3');
+                    const buttonsHTML = `
+                        <div class="mt-3">
+                            <div class="flex flex-wrap gap-2">
+                                <button class="suggestion-btn bg-gradient-to-r from-amber-400 to-orange-400 text-white text-xs px-3 py-1.5 rounded-full">
+                                    查看解决步骤
+                                </button>
+                                <button class="suggestion-btn bg-white border border-orange-300 text-orange-500 text-xs px-3 py-1.5 rounded-full">
+                                    预约上门
+                                </button>
+                                <button class="suggestion-btn bg-white border border-orange-300 text-orange-500 text-xs px-3 py-1.5 rounded-full">
+                                    购买耗材
+                                </button>
+                            </div>
+                        </div>
+                        <div class="mt-3">
+                            <p class="text-xs text-gray-500 mb-2">猜你还想问：</p>
+                            <div class="flex flex-wrap gap-2">
+                                <button class="suggestion-btn bg-gray-100 text-gray-700 text-xs px-3 py-1.5 rounded-full">
+                                    如何清洁${userMessage.includes('空调') ? '空调' : userMessage.includes('冰箱') ? '冰箱' : '洗衣机'}？
+                                </button>
+                                <button class="suggestion-btn bg-gray-100 text-gray-700 text-xs px-3 py-1.5 rounded-full">
+                                    ${userMessage.includes('空调') ? '空调' : userMessage.includes('冰箱') ? '冰箱' : '洗衣机'}省电技巧
+                                </button>
+                            </div>
+                        </div>
+                    `;
+                    responseContainer.innerHTML += buttonsHTML;
+                    scrollToBottom();
+                }, 2000);
+            }
+            // Send message handler
+            function sendMessage() {
+                const message = messageInput.value.trim();
+                if (message) {
+                    addMessage(message, true);
+                    messageInput.value = '';
+                    simulateAIResponse(message);
+                }
+            }
+            // Event listeners
+            sendButton.addEventListener('click', sendMessage);
+            messageInput.addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') {
+                    sendMessage();
+                }
+            });
+            // Voice button animation
+            voiceButton.addEventListener('mousedown', function() {
+                this.classList.add('pulse');
+            });
+            voiceButton.addEventListener('mouseup', function() {
+                this.classList.remove('pulse');
+                // Simulate voice input
+                addMessage("空调制冷效果不好怎么办？", true);
+                simulateAIResponse("空调制冷效果不好怎么办？");
+            });
+            // Suggestion button handling
+            document.addEventListener('click', function(e) {
+                if (e.target.classList.contains('suggestion-btn')) {
+                    const text = e.target.textContent.trim();
+                    addMessage(text, true);
+                    simulateAIResponse(text);
+                }
+            });
+            // Initial scroll to bottom
+            scrollToBottom();
+        });
+    </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=maomaobj/home3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>