Monte com sidebar e essas cores:

colors: {
primary: '#21223a',
secondary: '#ff580f',
}v

Monte uma aplicação onde terá um botão e o usuário irá clicar para iniciar um novo teste assim abrindo um modal para ele selecionar um emulador android rodando e enviar o aplicativo .apk

Faça de forma bonita e profissional a página e o modal.

Ao enviar o aplicativo e o emulador selecionado irá abrir um chatbot para o usuário testar o aplicativo usando linguagem natural. Adicione no chatbot os botões para as funcionalidades: Instalar aplicativo, rodar testes, abrir evidências, excluir mensagens e um botão de configuração.

README.md

@@ -1,10 +1,14 @@
 ---
-title: Android Autopilot Wizard
-emoji: 🐨
-colorFrom: gray
-colorTo: indigo
+title: Android AutoPilot Wizard 🚀✨
+colorFrom: purple
+colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).
+      

components/chatbot.js

@@ -0,0 +1,229 @@
+class ChatbotComponent extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          position: fixed;
+          bottom: 20px;
+          right: 20px;
+          width: 400px;
+          max-height: 600px;
+          background: white;
+          border-radius: 12px;
+          box-shadow: 0 10px 25px rgba(0,0,0,0.1);
+          z-index: 1000;
+          overflow: hidden;
+          font-family: 'Inter', sans-serif;
+        }
+        
+        .chatbot-header {
+          background: #21223a;
+          color: white;
+          padding: 16px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        
+        .chatbot-title {
+          font-weight: 600;
+          font-size: 18px;
+        }
+        
+        .chatbot-close {
+          background: none;
+          border: none;
+          color: white;
+          cursor: pointer;
+        }
+        
+        .chatbot-body {
+          padding: 16px;
+          height: 400px;
+          overflow-y: auto;
+        }
+        
+        .message {
+          margin-bottom: 12px;
+          max-width: 80%;
+          padding: 8px 12px;
+          border-radius: 8px;
+          font-size: 14px;
+        }
+        
+        .bot-message {
+          background: #f3f4f6;
+          margin-right: auto;
+          border-top-left-radius: 0;
+        }
+        
+        .user-message {
+          background: #ff580f;
+          color: white;
+          margin-left: auto;
+          border-top-right-radius: 0;
+        }
+        
+        .chatbot-footer {
+          display: flex;
+          padding: 16px;
+          border-top: 1px solid #e5e7eb;
+          background: #f9fafb;
+        }
+        
+        .chatbot-input {
+          flex: 1;
+          padding: 10px 12px;
+          border: 1px solid #e5e7eb;
+          border-radius: 8px;
+          outline: none;
+          margin-right: 8px;
+        }
+        
+        .chatbot-submit {
+          background: #21223a;
+          color: white;
+          border: none;
+          border-radius: 8px;
+          padding: 0 16px;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+        }
+        
+        .action-buttons {
+          display: flex;
+          gap: 8px;
+          padding: 8px 16px;
+          background: #f9fafb;
+          border-top: 1px solid #e5e7eb;
+        }
+        
+        .action-btn {
+          background: white;
+          border: 1px solid #e5e7eb;
+          border-radius: 20px;
+          padding: 6px 12px;
+          font-size: 12px;
+          display: flex;
+          align-items: center;
+          cursor: pointer;
+          transition: all 0.2s;
+        }
+        
+        .action-btn:hover {
+          background: #21223a;
+          color: white;
+        }
+        
+        .action-btn i {
+          margin-right: 4px;
+          font-size: 12px;
+        }
+      </style>
+      
+      <div class="chatbot-header">
+        <div class="chatbot-title">Android Test Assistant</div>
+        <button class="chatbot-close" id="closeChatbot">
+          <i data-feather="x"></i>
+        </button>
+      </div>
+      
+      <div class="chatbot-body" id="chatbotMessages">
+        <div class="message bot-message">
+          Welcome! How can I help you test your Android application today?
+        </div>
+      </div>
+      
+      <div class="action-buttons">
+        <button class="action-btn" id="installBtn">
+          <i data-feather="download"></i> Install
+        </button>
+        <button class="action-btn" id="testBtn">
+          <i data-feather="activity"></i> Run Tests
+        </button>
+        <button class="action-btn" id="evidenceBtn">
+          <i data-feather="image"></i> Evidence
+        </button>
+        <button class="action-btn" id="clearBtn">
+          <i data-feather="trash-2"></i> Clear
+        </button>
+        <button class="action-btn" id="settingsBtn">
+          <i data-feather="settings"></i> Settings
+        </button>
+      </div>
+      
+      <div class="chatbot-footer">
+        <input type="text" class="chatbot-input" id="chatbotInput" placeholder="Type your command...">
+        <button class="chatbot-submit" id="chatbotSubmit">
+          <i data-feather="send"></i>
+        </button>
+      </div>
+    `;
+
+    // Initialize feather icons
+    feather.replace();
+    
+    // Add event listeners
+    this.shadowRoot.getElementById('chatbotSubmit').addEventListener('click', this.sendMessage.bind(this));
+    this.shadowRoot.getElementById('chatbotInput').addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') this.sendMessage();
+    });
+    
+    this.shadowRoot.getElementById('closeChatbot').addEventListener('click', () => {
+      this.style.display = 'none';
+    });
+    
+    // Action buttons
+    this.shadowRoot.getElementById('installBtn').addEventListener('click', () => {
+      this.addMessage('Installing application...', 'bot');
+    });
+    
+    this.shadowRoot.getElementById('testBtn').addEventListener('click', () => {
+      this.addMessage('Running automated tests...', 'bot');
+    });
+    
+    this.shadowRoot.getElementById('evidenceBtn').addEventListener('click', () => {
+      this.addMessage('Opening test evidence...', 'bot');
+    });
+    
+    this.shadowRoot.getElementById('clearBtn').addEventListener('click', () => {
+      this.shadowRoot.getElementById('chatbotMessages').innerHTML = '';
+      this.addMessage('Chat cleared. How can I help?', 'bot');
+    });
+    
+    this.shadowRoot.getElementById('settingsBtn').addEventListener('click', () => {
+      this.addMessage('Opening settings panel...', 'bot');
+    });
+  }
+  
+  sendMessage() {
+    const input = this.shadowRoot.getElementById('chatbotInput');
+    const message = input.value.trim();
+    if (message) {
+      this.addMessage(message, 'user');
+      input.value = '';
+      
+      // Simulate bot response
+      setTimeout(() => {
+        this.addMessage('I can help you with that. What exactly would you like to test?', 'bot');
+      }, 1000);
+    }
+  }
+  
+  addMessage(text, sender) {
+    const messagesDiv = this.shadowRoot.getElementById('chatbotMessages');
+    const messageDiv = document.createElement('div');
+    messageDiv.className = `message ${sender}-message`;
+    messageDiv.textContent = text;
+    messagesDiv.appendChild(messageDiv);
+    messagesDiv.scrollTop = messagesDiv.scrollHeight;
+    
+    // Refresh feather icons
+    feather.replace();
+  }
+}
+
+customElements.define('custom-chatbot', ChatbotComponent);

index.html

@@ -1,19 +1,175 @@
-<!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>Android Test Wizard</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              primary: '#21223a',
+              secondary: '#ff580f',
+            }
+          }
+        }
+      }
+    </script>
+</head>
+<body class="bg-gray-100 font-sans">
+    <div class="flex h-screen overflow-hidden">
+        <!-- Sidebar -->
+        <div class="hidden md:flex flex-col w-64 bg-primary text-white">
+            <div class="flex items-center justify-center h-16 p-4 border-b border-gray-700">
+                <div class="flex items-center space-x-2">
+                    <i data-feather="box" class="text-secondary"></i>
+                    <span class="text-xl font-bold">Android Test Wizard</span>
+                </div>
+            </div>
+            <div class="flex flex-col flex-1 overflow-y-auto">
+                <nav class="flex-1 p-4 space-y-2">
+                    <a href="#" class="flex items-center px-4 py-2 rounded-lg bg-primary-dark hover:bg-gray-700 transition">
+                        <i data-feather="home" class="mr-3"></i>
+                        Dashboard
+                    </a>
+                    <a href="#" class="flex items-center px-4 py-2 rounded-lg hover:bg-gray-700 transition">
+                        <i data-feather="activity" class="mr-3"></i>
+                        Test History
+                    </a>
+                    <a href="#" class="flex items-center px-4 py-2 rounded-lg hover:bg-gray-700 transition">
+                        <i data-feather="settings" class="mr-3"></i>
+                        Settings
+                    </a>
+                </nav>
+                <div class="p-4 border-t border-gray-700">
+                    <div class="flex items-center space-x-2">
+                        <div class="h-10 w-10 rounded-full bg-gray-600 flex items-center justify-center">
+                            <i data-feather="user"></i>
+                        </div>
+                        <div>
+                            <p class="font-medium">John Doe</p>
+                            <p class="text-sm text-gray-400">Admin</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Main Content -->
+        <div class="flex-1 overflow-auto">
+            <!-- Header -->
+            <header class="bg-white shadow-sm">
+                <div class="flex items-center justify-between h-16 px-4">
+                    <div class="flex items-center md:hidden">
+                        <button id="sidebarToggle" class="text-gray-500 hover:text-gray-700">
+                            <i data-feather="menu"></i>
+                        </button>
+                    </div>
+                    <div class="flex items-center space-x-4">
+                        <button class="text-gray-500 hover:text-gray-700">
+                            <i data-feather="bell"></i>
+                        </button>
+                        <div class="h-8 w-8 rounded-full bg-gray-200 flex items-center justify-center">
+                            <i data-feather="user" class="text-gray-600"></i>
+                        </div>
+                    </div>
+                </div>
+            </header>
+
+            <!-- Content -->
+            <main class="p-6">
+                <div class="max-w-4xl mx-auto">
+                    <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 mb-6">
+                        <div class="flex flex-col items-center justify-center py-12">
+                            <div class="bg-secondary bg-opacity-10 p-4 rounded-full mb-6">
+                                <i data-feather="play" class="text-secondary w-10 h-10"></i>
+                            </div>
+                            <h2 class="text-2xl font-bold text-gray-800 mb-2">Start a New Test Session</h2>
+                            <p class="text-gray-600 mb-8">Upload your APK and select an emulator to begin testing your Android application.</p>
+                            <button id="startTestBtn" class="bg-secondary hover:bg-orange-700 text-white font-medium py-3 px-6 rounded-lg transition flex items-center">
+                                <i data-feather="plus" class="mr-2"></i> Start New Test
+                            </button>
+                        </div>
+                    </div>
+
+                    <div class="grid md:grid-cols-2 gap-6">
+                        <div class="bg-white rounded-xl shadow-md overflow-hidden p-6">
+                            <h3 class="text-lg font-medium text-gray-800 mb-4">Recent Tests</h3>
+                            <div class="space-y-3">
+                                <div class="border-b pb-3 last:border-0">
+                                    <p class="font-medium">com.example.app</p>
+                                    <p class="text-sm text-gray-500">Completed 2 hours ago</p>
+                                </div>
+                                <div class="border-b pb-3 last:border-0">
+                                    <p class="font-medium">com.test.app</p>
+                                    <p class="text-sm text-gray-500">Failed yesterday</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="bg-white rounded-xl shadow-md overflow-hidden p-6">
+                            <h3 class="text-lg font-medium text-gray-800 mb-4">Available Emulators</h3>
+                            <div class="space-y-3">
+                                <div class="border-b pb-3 last:border-0">
+                                    <p class="font-medium">Pixel 3 API 30</p>
+                                    <p class="text-sm text-gray-500">Android 11</p>
+                                </div>
+                                <div class="border-b pb-3 last:border-0">
+                                    <p class="font-medium">Pixel 5 API 31</p>
+                                    <p class="text-sm text-gray-500">Android 12</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </div>
+    </div>
+    <!-- Test Modal -->
+    <div id="testModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden test-modal">
+        <div class="modal-content w-full max-w-2xl mx-4">
+            <div class="modal-header">
+                <h3 class="modal-title">Start New Test Session</h3>
+                <button id="closeModal" class="modal-close">
+                    <i data-feather="x"></i>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="mb-6">
+                    <label class="block text-sm font-medium text-gray-700 mb-2">Select Android Emulator</label>
+                    <select class="select-emulator">
+                        <option>Pixel 3 API 30 (Android 11)</option>
+                        <option>Pixel 5 API 31 (Android 12)</option>
+                        <option>Nexus 5 API 29 (Android 10)</option>
+                        <option>Galaxy S10 API 28 (Android 9)</option>
+                    </select>
+                </div>
+                
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-2">Upload APK File</label>
+                    <div class="file-upload">
+                        <div class="flex flex-col items-center">
+                            <i data-feather="upload-cloud" class="file-upload-icon"></i>
+                            <p class="file-upload-text">Click to upload or drag and drop</p>
+                            <p class="file-upload-hint">APK file (max. 50MB)</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button class="cancel-btn" id="closeModal2">Cancel</button>
+                <button class="start-test-btn" id="startTest">
+                    <i data-feather="play"></i> Start Test
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <script src="components/chatbot.js"></script>
+<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
+</body>
+</html>