Hugging Face's logo

Spaces:
Daniil-plotnikov
/
mindmeld-explorer
Running

App Files Community
mindmeld-explorer
File size: 3,484 Bytes 
4ddfd3d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MindMeld Explorer - AI-Powered Search</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 src="components/navbar.js"></script>
    <script src="components/footer.js"></script>
</head>
<body class="bg-black text-white min-h-screen flex flex-col">
    <custom-navbar></custom-navbar>

    <main class="flex-grow container mx-auto px-4 py-8 max-w-4xl">
        <div class="text-center mb-12">
            <h1 class="text-5xl font-bold mb-4 bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">MindMeld Explorer</h1>
            <p class="text-xl text-gray-300">Ask anything. Get AI-powered answers with sources.</p>
        </div>

        <div class="relative mb-16">
            <div class="flex items-center border-2 border-gray-700 rounded-full px-6 py-4 bg-gray-900 focus-within:border-gray-500 transition-all">
                <input type="text" id="search-input" placeholder="Ask anything..." 
                    class="flex-grow bg-transparent outline-none text-lg text-white placeholder-gray-500">
                <button id="search-btn" class="ml-2 p-2 rounded-full bg-white text-black hover:bg-gray-200 transition">
                    <i data-feather="search"></i>
                </button>
            </div>
            <div class="absolute -bottom-8 left-0 right-0 text-center text-gray-500 text-sm">
                Try "What's the capital of France?" or "Explain quantum computing"
            </div>
        </div>

        <div id="search-results" class="space-y-8 hidden">
            <!-- Results will be inserted here -->
        </div>

        <div id="example-queries" class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="p-6 border border-gray-800 rounded-xl hover:bg-gray-900 cursor-pointer transition">
                <h3 class="text-lg font-medium mb-2">"Explain blockchain technology"</h3>
                <p class="text-gray-400">Get a simple explanation with key concepts</p>
            </div>
            <div class="p-6 border border-gray-800 rounded-xl hover:bg-gray-900 cursor-pointer transition">
                <h3 class="text-lg font-medium mb-2">"Latest SpaceX launch details"</h3>
                <p class="text-gray-400">Find up-to-date information with sources</p>
            </div>
            <div class="p-6 border border-gray-800 rounded-xl hover:bg-gray-900 cursor-pointer transition">
                <h3 class="text-lg font-medium mb-2">"How to make sourdough bread"</h3>
                <p class="text-gray-400">Step-by-step guide with expert tips</p>
            </div>
            <div class="p-6 border border-gray-800 rounded-xl hover:bg-gray-900 cursor-pointer transition">
                <h3 class="text-lg font-medium mb-2">"Best productivity techniques"</h3>
                <p class="text-gray-400">Research-backed methods to boost efficiency</p>
            </div>
        </div>
    </main>

    <custom-footer></custom-footer>

    <script src="script.js"></script>
    <script>
        feather.replace();
    </script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>