Hugging Face's logo

Spaces:
ClemSummer
/
ai-lab
Running on CPU Upgrade

App Files Community
ai-lab
File size: 2,578 Bytes 
7b2eca8
 
 
 
 
 
 
 
 
 
 
 
 
 
 
79a071f
 
3aa3d4c
79a071f
 
7b2eca8
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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" />
  <title>Clement's AI Lab</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
  <div class="max-w-md w-full p-6 text-center">
    <h1 class="text-3xl font-bold mb-6 text-gray-800">🚀 Clement's AI Lab</h1>
    <div class="space-y-4">
      <a href="/captioning" class="block w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg shadow text-lg font-semibold">
        🖼️ Image Captioning
      </a>
      <a href="/cbow" class="block w-full bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg shadow text-lg font-semibold">
        🧙‍♂️ Word Alchemy
      </a>
      <a href="/contentdistillery" class="block w-full bg-red-600 hover:bg-red-700 text-white py-3 rounded-lg shadow text-lg font-semibold">
        📚 Content Distillery
      </a>
      <!-- Add more project links here -->
    </div>
  </div>

<!-- Floating Help Button -->
<button id="helpButton"
  class="fixed bottom-4 right-4 bg-blue-600 text-white rounded-full w-12 h-12 text-2xl font-bold shadow-lg hover:bg-blue-700 transition">
  ?
</button>

<!-- Help Modal -->
<div id="helpModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
  <div class="bg-white rounded-lg p-6 max-w-sm w-full shadow-lg text-left">
    <h2 class="text-xl font-semibold mb-4">Clement's AI Lab</h2>
    <p class="text-gray-700 mb-4">
      Welcome! I'm Clement, and I've built these interactive models for you to experiment with. Whether you're curious about AI or just want to have some fun, there's something here for everyone.<!-- Page-specific explanation goes here -->
    </p>
    <button id="closeModal"
      class="mt-2 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
      Close
    </button>
  </div>
</div>

<script>
  const helpButton = document.getElementById('helpButton');
  const helpModal = document.getElementById('helpModal');
  const closeModal = document.getElementById('closeModal');

  helpButton.addEventListener('click', () => {
    helpModal.classList.remove('hidden');
  });

  closeModal.addEventListener('click', () => {
    helpModal.classList.add('hidden');
  });

  // Optional: close modal when clicking outside the modal box
  helpModal.addEventListener('click', (e) => {
    if (e.target === helpModal) {
      helpModal.classList.add('hidden');
    }
  });
</script>

</body>
</html>