Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Tool Finder</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| </head> | |
| <body class="bg-gray-100 flex flex-col items-center justify-center h-screen"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl font-bold text-gray-800 mb-4">AI Tool Finder</h1> | |
| <p class="text-gray-600 mb-6">Find the best AI tools instantly</p> | |
| <div class="w-full max-w-md mx-auto"> | |
| <input type="text" id="searchInput" class="w-full px-4 py-2 border rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-blue-400" placeholder="Search for AI tools..."> | |
| <button onclick="searchTools()" class="mt-4 px-6 py-2 bg-blue-600 text-white rounded-lg shadow hover:bg-blue-700">Search</button> | |
| </div> | |
| <div id="results" class="mt-6 w-full max-w-md text-left"></div> | |
| </div> | |
| <script> | |
| function searchTools() { | |
| const query = document.getElementById('searchInput').value.trim(); | |
| const resultsDiv = document.getElementById('results'); | |
| resultsDiv.innerHTML = ""; | |
| if (query === "") { | |
| resultsDiv.innerHTML = "<p class='text-red-500'>Please enter a search query.</p>"; | |
| return; | |
| } | |
| // Simulated tool search (Replace with real API call) | |
| const tools = [ | |
| { name: "ChatGPT", description: "AI-powered chatbot and writing assistant." }, | |
| { name: "DALL·E", description: "AI image generation tool." }, | |
| { name: "Midjourney", description: "AI-driven art generation platform." }, | |
| { name: "Stable Diffusion", description: "AI-powered deep learning model for image generation." }, | |
| ]; | |
| const filteredTools = tools.filter(tool => tool.name.toLowerCase().includes(query.toLowerCase())); | |
| if (filteredTools.length > 0) { | |
| filteredTools.forEach(tool => { | |
| resultsDiv.innerHTML += `<div class='p-4 bg-white rounded-lg shadow-md mb-2'> | |
| <h3 class='font-semibold text-lg'>${tool.name}</h3> | |
| <p class='text-gray-600'>${tool.description}</p> | |
| </div>`; | |
| }); | |
| } else { | |
| resultsDiv.innerHTML = "<p class='text-gray-600'>No results found.</p>"; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |