readme + final touches

README.md

@@ -7,4 +7,59 @@ sdk: docker
 app_port: 7860
 ---
 
-Uses Huggingface Spaces for the backend, Upstart for the database, and Vercel for the frontend.
+# Evolution Transformer: An Interactive Playground for LLM Model Merging
+
+An interactive web application for exploring model merging techniques for large language models. This project allows users to dynamically create new "child" models by combining pre-trained specialists, based on the concepts from the research paper [Evolutionary Optimization of Model Merging Recipes](https://arxiv.org/pdf/2403.13187).
+
+Live Demo: [https://evolutiontransformer.michaelbao.com](https://evolutiontransformer.michaelbao.com)
+Backend API: [Hugging Face Space](https://tcmmichaelb139-evolutiontransformer.hf.space)
+
+## Features
+
+- Dynamic Model Merging: Create new models with more or fewer layers than the original parents by defining a recipe of any length.
+- Full Model Control: In addition to the main transformer blocks, users can also control the blend ratios for the embedding and final output layers.
+- Interactive Interface: User-friendly web interface built with React and Tailwind CSS for easy model selection and configuration.
+- Asynchronous Processing: Efficient task handling using Celery and Redis for background processing of model merging.
+
+## Architecture
+
+The application is built on a modern, decoupled, multi-service architecture designed for scalable and robust machine learning deployment. The backend is running on a CPU instead of a GPU to save costs, however to run GPT2-medium (which we are using) it is decent.
+
+[React Frontend @ Cloudflare] <--> [FastAPI Web Server @ HF Spaces] <--> [Redis Queue @ Upstash] <--> [Celery GPU Worker @ HF Spaces]
+
+## Tech Stack
+
+- Frontend: React (Vite), Tailwind CSS
+- Backend: FastAPI, PyTorch/Hugging Face Transformers, Celery, Redis, uv (package manager)
+- Deployment: Cloudflare Pages (Frontend), Hugging Face Spaces (Backend and Worker), Upstash (Redis)
+
+## Setup Instructions
+
+You need to run four separate processes in four different terminal tabs. You may need to change some link variables in the code to point to your own deployment URLs.
+
+**1. Start Redis (if not already running as a service):**
+
+```bash
+redis-server
+```
+
+**2. Start the Celery Worker:**
+
+```bash
+# In your project root, with .venv active
+celery -A evolutiontransformer.worker.celery_app worker --loglevel=info -c 1
+```
+
+**3. Start the FastAPI Server:**
+
+```bash
+# In your project root, with .venv active
+uvicorn evolutiontransformer.api:app --reload
+```
+
+**4. Start the React Frontend:**
+
+```bash
+# In the /frontend directory
+npm run dev
+```

frontend/src/App.jsx

@@ -49,6 +49,35 @@ function App() {
 
   return (
     <div className="h-screen bg-gradient-to-br from-primary-50 to-secondary-50 overflow-hidden">
+      {/* GitHub Corner */}
+      <a
+        href="https://github.com/tcmmichaelb139/evolutiontransformer"
+        className="github-corner group absolute top-0 right-0 z-50"
+        aria-label="View source on GitHub"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <svg
+          width="40"
+          height="40"
+          viewBox="0 0 250 250"
+          className="fill-gray-800 text-white absolute top-0 right-0 border-0"
+          aria-hidden="true"
+        >
+          <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
+          <path
+            d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+            fill="currentColor"
+            className="group-hover:animate-pulse origin-[130px_106px] transition-transform duration-300"
+          />
+          <path
+            d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+            fill="currentColor"
+            className="octo-body"
+          />
+        </svg>
+      </a>
+
       <Options
         models={models}
         selectedModel1={selectedModel1}