Resolve README.md conflict and merge with remote Hugging Face content

.gitignore

@@ -0,0 +1,3 @@
+__pycache__/
+*.png
+**/artifacts/

.huggingface/space.yaml

@@ -0,0 +1 @@
+sdk: docker

Dockerfile

@@ -0,0 +1,10 @@
+# 🐍 Use official Python
+FROM python:3.11-slim
+
+WORKDIR /app
+COPY . .
+
+RUN pip install --upgrade pip
+RUN pip install -r requirements.txt
+
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]

README.md

@@ -8,4 +8,10 @@ pinned: false
 short_description: Clement's AI Lab to demonstrate advanced AI models
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# AI Lab
+
+This Hugging Face Space includes multiple AI tools:
+- 🖼️ ViT image captioning
+- 📝 PPO-based Reddit summarization (coming soon)
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference<<<<<<< HEAD

main.py

@@ -0,0 +1,47 @@
+# app/main.py
+
+from fastapi import FastAPI, UploadFile, File
+from fastapi.responses import HTMLResponse
+from fastapi.staticfiles import StaticFiles
+import shutil
+from pathlib import Path
+
+from vit_captioning.generate import CaptionGenerator
+
+app = FastAPI()
+
+# Serve static files
+static_dir = Path(__file__).parent / "vit_captioning" / "static"
+app.mount("/static", StaticFiles(directory=static_dir), name="static")
+
+# ✅ Landing page at `/`
+@app.get("/", response_class=HTMLResponse)
+async def landing():
+    return Path("vit_captioning/static/landing.html").read_text()
+
+# ✅ Captioning page at `/captioning`
+@app.get("/captioning", response_class=HTMLResponse)
+async def captioning():
+    return Path("vit_captioning/static/captioning/index.html").read_text()
+
+# ✅ Example: Project 2 placeholder
+@app.get("/project2", response_class=HTMLResponse)
+async def project2():
+    return "<h1>Coming Soon: Project 2</h1>"
+
+# ✅ Caption generation endpoint for captioning app
+# Keep the path consistent with your JS fetch()!
+caption_generator = CaptionGenerator(
+    model_type="CLIPEncoder",
+    checkpoint_path="./vit_captioning/artifacts/CLIPEncoder_40epochs_unfreeze12.pth",
+    quantized=False
+)
+
+@app.post("/generate")
+async def generate(file: UploadFile = File(...)):
+    temp_file = f"temp_{file.filename}"
+    with open(temp_file, "wb") as buffer:
+        shutil.copyfileobj(file.file, buffer)
+
+    captions = caption_generator.generate_caption(temp_file)
+    return captions

ppo_summarizer/predict_ppo.py

@@ -0,0 +1,71 @@
+# predict.py
+
+import torch
+from transformers import AutoTokenizer, AutoModelForCausalLM
+from peft import PeftModel
+import argparse
+import os
+
+# -------------------------------
+# Config
+# -------------------------------
+MODEL_NAME = "Qwen/Qwen3-0.6B-Base"
+CHECKPOINT_DIR = "./artifacts/qwen_loRA"
+DEVICE = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+MAX_NEW_TOKENS = 64
+
+# -------------------------------
+# Load tokenizer and model
+# -------------------------------
+print("🔄 Loading tokenizer and model...")
+tokenizer = AutoTokenizer.from_pretrained(MODEL_NAME)
+tokenizer.pad_token = tokenizer.eos_token
+
+base_model = AutoModelForCausalLM.from_pretrained(
+    MODEL_NAME,
+    torch_dtype=torch.float16,
+    device_map="auto"
+)
+
+model = PeftModel.from_pretrained(base_model, CHECKPOINT_DIR)
+model.eval()
+model = model.to(DEVICE)
+
+# -------------------------------
+# Generate Summary
+# -------------------------------
+def generate_summary(title: str, post: str) -> str:
+    prompt = f"Title: {title}\n\nPost: {post}\n\nSummary:"
+    inputs = tokenizer(prompt, return_tensors="pt", padding=True).to(DEVICE)
+
+    with torch.no_grad():
+        outputs = model.generate(
+            **inputs,
+            max_new_tokens=MAX_NEW_TOKENS,
+            do_sample=True,
+            top_k=50,
+            top_p=0.95,
+            temperature=0.7,
+            pad_token_id=tokenizer.pad_token_id,
+            use_cache=True
+        )
+
+    full_output = tokenizer.decode(outputs[0], skip_special_tokens=True)
+    summary = full_output.split("Summary:")[-1].strip()
+    return summary
+
+# -------------------------------
+# CLI
+# -------------------------------
+if __name__ == "__main__":
+    parser = argparse.ArgumentParser(description="Generate summary with trained Qwen PPO model")
+    parser.add_argument("--title", type=str, required=True, help="Title of the post")
+    parser.add_argument("--post", type=str, required=True, help="Content of the post")
+    args = parser.parse_args()
+
+    print("\n📘 Title:", args.title)
+    print("📝 Post:", args.post[:100] + ("..." if len(args.post) > 100 else ""))
+    print("\n🤖 Generating summary...\n")
+
+    summary = generate_summary(args.title, args.post)
+    print("✅ Summary:\n", summary)

requirements.txt

@@ -0,0 +1,8 @@
+fastapi
+uvicorn[standard]
+--extra-index-url https://download.pytorch.org/whl/cpu
+torch==2.6.0+cpu
+numpy<2
+transformers
+pillow
+python-multipart

vit_captioning/generate.py

@@ -0,0 +1,115 @@
+# generate.py
+
+import torch
+from PIL import Image
+from transformers import ViTImageProcessor, CLIPProcessor, AutoTokenizer
+from vit_captioning.models.encoder import ViTEncoder, CLIPEncoder
+from vit_captioning.models.decoder import TransformerDecoder
+
+import argparse
+
+
+class CaptionGenerator:
+    def __init__(self, model_type: str, checkpoint_path: str, quantized=False):
+        print(f"Loading {model_type} | Quantized: {quantized}")
+        # Setup device
+        if torch.cuda.is_available():
+            self.device = torch.device("cuda")
+            print("Using NVIDIA CUDA GPU acceleration.")
+        elif torch.backends.mps.is_available():
+            self.device = torch.device("mps")
+            print("Using Apple MPS GPU acceleration.")
+        else:
+            self.device = torch.device("cpu")
+            print("No GPU found, falling back to CPU.")
+
+        # Load tokenizer
+        self.tokenizer = AutoTokenizer.from_pretrained('bert-base-uncased')
+
+        # Select encoder, processor, output dim
+        if model_type == "ViTEncoder":
+            self.encoder = ViTEncoder().to(self.device)
+            self.encoder_dim = 768
+            self.processor = ViTImageProcessor.from_pretrained("google/vit-base-patch16-224-in21k")
+        elif model_type == "CLIPEncoder":
+            self.encoder = CLIPEncoder().to(self.device)
+            self.encoder_dim = 512
+            self.processor = CLIPProcessor.from_pretrained("openai/clip-vit-base-patch32")
+        else:
+            raise ValueError("Unknown model type")
+
+        if quantized:
+            print("Applying dynamic quantization to encoder...")
+            self.encoder = torch.ao.quantization.quantize_dynamic(
+                self.encoder,
+                {torch.nn.Linear},
+                dtype=torch.qint8
+            )
+
+        # Initialize decoder
+        self.decoder = TransformerDecoder(
+            vocab_size=30522,
+            hidden_dim=self.encoder_dim,
+            encoder_dim=self.encoder_dim
+        ).to(self.device)
+
+        # Load checkpoint
+        checkpoint = torch.load(checkpoint_path, map_location=self.device)
+        self.encoder.load_state_dict(checkpoint['encoder_state_dict'])
+        self.decoder.load_state_dict(checkpoint['decoder_state_dict'])
+        self.encoder.eval()
+        self.decoder.eval()
+
+    def generate_caption(self, image_path: str) -> dict:
+        image = Image.open(image_path).convert("RGB")
+        encoding = self.processor(images=image, return_tensors='pt')
+        pixel_values = encoding['pixel_values'].to(self.device)
+
+        captions = {}
+
+        with torch.no_grad():
+            encoder_outputs = self.encoder(pixel_values)
+
+            # Greedy
+            caption_ids = self.decoder.generate(encoder_outputs, mode="greedy")
+            captions['greedy'] = self.tokenizer.decode(caption_ids[0], skip_special_tokens=True)
+
+            # Top-k
+            caption_ids = self.decoder.generate(encoder_outputs, mode="topk", top_k=30)
+            captions['topk'] = self.tokenizer.decode(caption_ids[0], skip_special_tokens=True)
+
+            # Top-p
+            caption_ids = self.decoder.generate(encoder_outputs, mode="topp", top_p=0.92)
+            captions['topp'] = self.tokenizer.decode(caption_ids[0], skip_special_tokens=True)
+
+        return captions
+
+
+if __name__ == "__main__":
+    # CLI usage
+    parser = argparse.ArgumentParser(description="Generate caption using ViT or CLIP.")
+    parser.add_argument("--model", type=str, default="ViTEncoder",
+                        choices=["ViTEncoder", "CLIPEncoder"],
+                        help="Choose encoder: ViTEncoder or CLIPEncoder")
+    parser.add_argument("--checkpoint", type=str, required=True,
+                        help="Path to the .pth checkpoint file")
+    parser.add_argument("--image", type=str, required=True,
+                        help="Path to input image file")
+    parser.add_argument(
+        "--quantized",
+        action="store_true",
+        help="Load encoder with dynamic quantization"
+    )  ### ✅ ADDED
+
+    args = parser.parse_args()
+
+    generator = CaptionGenerator(
+        model_type=args.model,
+        checkpoint_path=args.checkpoint
+    )
+
+    captions = generator.generate_caption(args.image)
+
+    print(f"Greedy-argmax (deterministic, factual): {captions['greedy']}")
+    print(f"Top-k (diverse, creative): {captions['topk']}")
+    print(f"Top-p (diverse, human-like): {captions['topp']}")

vit_captioning/models/decoder.py

@@ -0,0 +1,228 @@
+# decoder.py
+
+import torch
+import torch.nn as nn
+import torch.nn.functional as F
+import math
+
+class PositionalEncoding(nn.Module):
+    def __init__(self, d_model, max_len=5000):
+        super(PositionalEncoding, self).__init__()
+
+        pe = torch.zeros(max_len, d_model)  # [max_len, d_model]
+        position = torch.arange(0, max_len, dtype=torch.float).unsqueeze(1)  # [max_len, 1]
+        div_term = torch.exp(torch.arange(0, d_model, 2).float() * (-math.log(10000.0) / d_model))
+
+        pe[:, 0::2] = torch.sin(position * div_term)  # dim 2i
+        pe[:, 1::2] = torch.cos(position * div_term)  # dim 2i+1
+
+        pe = pe.unsqueeze(1)  # [max_len, 1, d_model]
+        self.register_buffer('pe', pe)
+
+    def forward(self, x):
+        # x: [seq_len, batch_size, d_model]
+        x = x + self.pe[:x.size(0)]
+        return x
+
+
+def generate_square_subsequent_mask(sz):
+    mask = (torch.triu(torch.ones(sz, sz)) == 1).transpose(0, 1)
+    mask = mask.float().masked_fill(mask == 0, float('-inf')).masked_fill(mask == 1, float(0.0))
+    return mask
+
+
+class TransformerDecoder(nn.Module):
+    def __init__(self, vocab_size, hidden_dim=512, encoder_dim=768, num_layers=2):
+        super(TransformerDecoder, self).__init__()
+
+        self.vocab_size = vocab_size
+        self.embedding = nn.Embedding(vocab_size, hidden_dim)
+        self.positional_encoding = PositionalEncoding(hidden_dim)
+
+        decoder_layer = nn.TransformerDecoderLayer(d_model=hidden_dim, nhead=8)
+        self.transformer_decoder = nn.TransformerDecoder(decoder_layer, num_layers=num_layers)
+
+        self.fc_out = nn.Linear(hidden_dim, vocab_size)
+
+        # Project ViT encoder output to decoder hidden_dim if needed
+        self.encoder_projection = nn.Linear(encoder_dim, hidden_dim)
+
+    def forward(self, input_ids, encoder_outputs, tgt_attention_mask=None):
+        embedded = self.embedding(input_ids).permute(1, 0, 2)
+        embedded = self.positional_encoding(embedded)
+
+        memory = self.encoder_projection(encoder_outputs).unsqueeze(0)
+
+        tgt_mask = generate_square_subsequent_mask(embedded.size(0)).to(embedded.device)
+
+        if tgt_attention_mask is not None:
+            tgt_key_padding_mask = ~tgt_attention_mask.bool()
+        else:
+            tgt_key_padding_mask = None
+
+        output = self.transformer_decoder(
+            tgt=embedded,
+            memory=memory,
+            tgt_mask=tgt_mask,
+            tgt_key_padding_mask=tgt_key_padding_mask
+        )
+
+        output = self.fc_out(output).permute(1, 0, 2)
+        return output
+
+    def generate(
+        self,
+        encoder_outputs,
+        start_token_id=101,  # [CLS] token for BERT
+        eos_token_id=102,
+        max_length=50,
+        mode="greedy",      # "greedy", "beam", "topk", "topp"
+        num_beams=3,
+        top_k=50,
+        top_p=0.95,
+        length_penalty=1.0
+    ):
+        
+        device = encoder_outputs.device
+
+        """
+        Generate caption using specified decoding mode.
+        """
+        batch_size = encoder_outputs.size(0)
+        input_ids = torch.full(
+            (batch_size, 1),
+            start_token_id,
+            dtype=torch.long,
+            device=device
+        )
+
+        if mode == "beam":
+            return self._generate_beam_search(
+                encoder_outputs,
+                input_ids,
+                max_length,
+                eos_token_id,
+                num_beams,
+                length_penalty
+            )
+
+        # Greedy or sampling
+        generated = input_ids
+
+        for _ in range(max_length):
+            logits = self.forward(generated, encoder_outputs)   # (batch, seq_len, vocab)
+            next_token_logits = logits[:, -1, :]                # (batch, vocab)
+
+            if mode == "greedy":
+                next_token = next_token_logits.argmax(dim=-1, keepdim=True)
+
+            elif mode == "topk":
+                probs = F.softmax(next_token_logits, dim=-1)
+                topk_probs, topk_indices = torch.topk(probs, top_k)
+                next_token = topk_indices[
+                    torch.arange(probs.size(0)),
+                    torch.multinomial(topk_probs, num_samples=1).squeeze(-1)
+                ].unsqueeze(-1)
+
+            elif mode == "topp":
+                probs = F.softmax(next_token_logits, dim=-1)
+                sorted_probs, sorted_indices = torch.sort(probs, descending=True)
+                cumulative_probs = torch.cumsum(sorted_probs, dim=-1)
+
+                # Remove tokens with cumulative probs above threshold
+                sorted_mask = cumulative_probs <= top_p
+                sorted_mask[..., 0] = 1  # Always keep at least 1 token
+
+                filtered_probs = sorted_probs * sorted_mask
+                filtered_probs /= filtered_probs.sum(dim=-1, keepdim=True)
+
+                next_token = sorted_indices[
+                    torch.arange(probs.size(0)),
+                    torch.multinomial(filtered_probs, num_samples=1).squeeze(-1)
+                ].unsqueeze(-1)
+
+            else:
+                raise ValueError(f"Unknown mode: {mode}")
+
+            generated = torch.cat((generated, next_token), dim=1)
+
+            if eos_token_id is not None:
+                if (next_token == eos_token_id).all():
+                    break
+
+        return generated[:, 1:]  # Remove BOS if needed
+
+    def _generate_beam_search(
+        self,
+        encoder_outputs,
+        input_ids,
+        max_length=50,
+        eos_token_id=102,
+        num_beams=3,
+        length_penalty=1.0
+    ):
+        """
+        Custom beam search decoder for batch_size = 1.
+        """
+        device = encoder_outputs.device
+        batch_size = encoder_outputs.size(0)
+        vocab_size = self.vocab_size
+
+        # Assume batch_size = 1 for simplicity
+        assert batch_size == 1, "Basic beam search only supports batch size 1 here."
+
+        # Initialize beams
+        beam_sequences = [input_ids] * num_beams
+        beam_scores = torch.zeros(num_beams, device=device)
+
+        finished_sequences = []
+        finished_scores = []
+
+        for step in range(max_length):
+            all_candidates = []
+
+            for beam_idx in range(num_beams):
+                seq = beam_sequences[beam_idx]
+                score = beam_scores[beam_idx]
+
+                logits = self.forward(seq, encoder_outputs)  # (1, seq_len, vocab)
+                next_token_logits = logits[:, -1, :]         # (1, vocab)
+                log_probs = F.log_softmax(next_token_logits, dim=-1).squeeze(0)  # (vocab,)
+
+                for token_id in range(vocab_size):
+                    new_seq = torch.cat([seq, torch.tensor([[token_id]], device=device)], dim=1)
+                    new_score = score + log_probs[token_id]
+                    all_candidates.append((new_seq, new_score))
+
+            # Get top beams
+            all_candidates.sort(key=lambda x: x[1], reverse=True)
+            beam_sequences = []
+            beam_scores = []
+
+            for seq, score in all_candidates[:num_beams]:
+                if eos_token_id is not None and seq[0, -1].item() == eos_token_id:
+                    finished_sequences.append(seq)
+                    finished_scores.append(score)
+                else:
+                    beam_sequences.append(seq)
+                    beam_scores.append(score)
+
+            beam_scores = torch.stack(beam_scores) if beam_scores else torch.tensor([], device=device)
+
+            # Early stopping if all beams ended
+            if len(beam_sequences) == 0:
+                break
+
+        # Add unfinished beams to finished
+        if not finished_sequences:
+            finished_sequences = beam_sequences
+            finished_scores = beam_scores
+
+        # Length penalty
+        finished_scores = [s / (len(seq[0]) ** length_penalty) for seq, s in zip(finished_sequences, finished_scores)]
+
+        # Pick best
+        best_idx = torch.tensor(finished_scores).argmax().item()
+        best_seq = finished_sequences[best_idx]
+
+        return best_seq[:, 1:]  # remove BOS if needed

vit_captioning/models/encoder.py

@@ -0,0 +1,38 @@
+# models/encoder.py
+from transformers import ViTModel, ViTImageProcessor, CLIPModel
+import torch.nn as nn
+import torch
+from PIL import Image
+
+
+import torch.nn as nn
+
+class ViTEncoder(nn.Module):
+    def __init__(self):  # Make decoder_dim configurable!
+        super(ViTEncoder, self).__init__()
+
+        #weights = ViT_B_16_Weights.DEFAULT
+        self.vit = ViTModel.from_pretrained('google/vit-base-patch16-224-in21k')
+
+    def forward(self, pixel_values):
+
+        # ViTModel - output shape = [batch, seq_len, hidden]
+        outputs = self.vit(pixel_values=pixel_values)
+
+        # Take CLS: last_hidden_state
+
+        cls_embedding = outputs.last_hidden_state[:, 0]
+        return cls_embedding
+    
+# encoder.py
+from transformers import CLIPModel
+
+class CLIPEncoder(nn.Module):
+    def __init__(self):
+        super(CLIPEncoder, self).__init__()
+        self.clip = CLIPModel.from_pretrained("openai/clip-vit-base-patch32")
+
+    def forward(self, pixel_values):
+        # ✅ Directly get the pooled image features (already the final representation)
+        image_features = self.clip.get_image_features(pixel_values=pixel_values)
+        return image_features  # shape: [batch_size, hidden_dim]

vit_captioning/static/captioning/index.html

@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>🤖 Image 🖼️ Captioning</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <!-- ✅ Tailwind CDN -->
+  <script src="https://cdn.tailwindcss.com"></script>
+</head>
+
+<body class="bg-gray-100 flex items-center justify-center min-h-screen">
+  <a href="/" class="absolute top-4 left-4 text-blue-600 hover:text-blue-800 text-sm font-semibold flex items-center">
+    <!-- back arrow -->
+    <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"></path>
+    </svg>
+    Back to Home
+  </a>
+
+  <div class="bg-white p-8 rounded-xl shadow-md w-full max-w-md text-center">
+    <h1 class="text-2xl font-bold mb-4 text-gray-800">AI Image Captioning</h1>
+
+    <!-- Upload Form -->
+    <form id="uploadForm" class="space-y-4">
+      <input 
+        type="file" 
+        id="fileInput" 
+        accept="image/*" 
+        required
+        class="block w-full text-sm text-gray-700 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
+      />
+
+      <!-- Live Image Preview -->
+      <div id="previewContainer" class="mt-4 hidden">
+        <img id="previewImage" src="#" alt="Preview" class="mx-auto max-h-64 rounded-md shadow" />
+      </div>
+
+      <button 
+        type="submit"
+        class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition"
+      >
+        Generate Captions
+      </button>
+    </form>
+
+    <!-- Captions -->
+    <div id="result" class="mt-6 text-left hidden">
+      <h2 class="text-lg font-semibold mb-2 text-gray-700">Captions:</h2>
+      <p><strong>Factual 🤖:</strong> <span id="greedy" class="text-gray-800"></span></p>
+      <p><strong>Creative 🤪:</strong> <span id="topk" class="text-gray-800"></span></p>
+      <p><strong>Human like 🫀:</strong> <span id="topp" class="text-gray-800"></span></p>
+    </div>
+  </div>
+
+  <script>
+    const fileInput = document.getElementById('fileInput');
+    const previewContainer = document.getElementById('previewContainer');
+    const previewImage = document.getElementById('previewImage');
+    const form = document.getElementById('uploadForm');
+    const result = document.getElementById('result');
+
+    // ✅ Live preview + clear old captions
+    fileInput.addEventListener('change', () => {
+      const file = fileInput.files[0];
+      if (file) {
+        const reader = new FileReader();
+        reader.onload = e => {
+          previewImage.src = e.target.result;
+          previewContainer.classList.remove('hidden');
+        };
+        reader.readAsDataURL(file);
+
+        // Clear old captions
+        document.getElementById('greedy').innerText = "";
+        document.getElementById('topk').innerText = "";
+        document.getElementById('topp').innerText = "";
+        result.classList.add('hidden');
+
+      } else {
+        previewContainer.classList.add('hidden');
+      }
+    });
+
+    // ✅ Submit form
+    form.addEventListener('submit', async e => {
+      e.preventDefault();
+      const file = fileInput.files[0];
+      const formData = new FormData();
+      formData.append('file', file);
+
+      const res = await fetch('/generate', {
+        method: 'POST',
+        body: formData
+      });
+
+      const data = await res.json();
+      document.getElementById('greedy').innerText = data.greedy || "N/A";
+      document.getElementById('topk').innerText = data.topk || "N/A";
+      document.getElementById('topp').innerText = data.topp || "N/A";
+      result.classList.remove('hidden');
+    });
+  </script>
+
+<!-- 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">🤖 Image Captioning</h2>
+    <p class="text-gray-700 mb-4">
+      Please upload a picture / image and press "Generate Captions", the model will generate captions for it. 
+      The model uses google/vit-base-patch16-224-in21k or openai/clip-vit-base-patch32
+      as image encoder, trained together with a customer transformer decoder to generate captions.<br>
+      The available caption styles are: "Factual 🤖", "Creative 🤪", and "Human like 🫀", 
+      which are actually argmax (greedy), top-K and top-P respectively.
+
+    </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>

vit_captioning/static/landing.html

@@ -0,0 +1,65 @@
+<!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="/project2" class="block w-full bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg shadow text-lg font-semibold">
+        🤖 Coming Soon: Word calculator
+      </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>