Initial commit for uvify UI

.dockerignore

@@ -0,0 +1,68 @@
+# Node.js
+node_modules/
+npm-debug.log*
+.npm
+
+# Python
+.venv/
+__pycache__/
+*.pyc
+*.pyo
+*.pyd
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+
+# IDEs
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Git
+.git/
+.gitignore
+
+# Logs
+*.log
+logs/
+
+# Runtime data
+pids/
+*.pid
+*.seed
+*.pid.lock
+
+# Environment
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Build outputs (will be copied from build stage)
+dist/
+
+# Development scripts
+start.sh
+
+# Documentation
+README.md 

.gitignore

@@ -0,0 +1,11 @@
+# Python-generated files
+__pycache__/
+*.py[oc]
+build/
+dist/
+wheels/
+*.egg-info
+
+# Virtual environments
+.venv
+node_modules/

DEPLOYMENT.md

@@ -0,0 +1,89 @@
+# HuggingFace Deployment Guide
+
+This directory contains the uvify application configured for deployment on HuggingFace Spaces.
+
+## Quick Deploy to HuggingFace Spaces
+
+### Method 1: Direct Upload
+
+1. Create a new HuggingFace Space:
+   - Go to https://huggingface.co/new-space
+   - Choose "Docker" as the SDK
+   - Set visibility as needed
+
+2. Upload files:
+   - Copy all files from this directory to your HuggingFace Space repository
+   - Commit and push the changes
+
+3. The Space will automatically build and deploy using the Dockerfile
+
+### Method 2: Git Integration
+
+1. Create a new HuggingFace Space with Git integration
+2. Clone your HuggingFace Space repository locally
+3. Copy the contents of this directory to the cloned repository
+4. Commit and push:
+   ```bash
+   git add .
+   git commit -m "Initial uvify deployment"
+   git push
+   ```
+
+## Files Overview
+
+- `Dockerfile` - Multi-stage build configuration for HuggingFace
+- `server.py` - Production FastAPI server that serves both API and frontend
+- `requirements.txt` - Python dependencies
+- `.dockerignore` - Excludes unnecessary files from Docker build
+- Frontend files (`src/`, `package.json`, etc.) - React application
+
+## Architecture
+
+The deployment uses a multi-stage Docker build:
+
+1. **Frontend Stage**: Builds the React application using Node.js and Vite
+2. **Production Stage**: 
+   - Uses Python 3.10 base image
+   - Installs uvify and FastAPI dependencies using `uv`
+   - Copies built frontend assets
+   - Serves both API and static files on port 7860
+
+## API Endpoints
+
+Once deployed, your application will be available at:
+- Frontend: `https://your-space-name.hf.space/`
+- API docs: `https://your-space-name.hf.space/docs`
+- API: `https://your-space-name.hf.space/api/`
+
+## Environment Variables
+
+The application uses these environment variables:
+- `PORT` - Server port (default: 7860 for HuggingFace)
+
+## Local Testing
+
+To test the Docker build locally:
+
+```bash
+# Build the image
+docker build -t uvify-app .
+
+# Run the container
+docker run -p 7860:7860 uvify-app
+```
+
+Then visit http://localhost:7860 to test the application.
+
+## Troubleshooting
+
+### Build Issues
+- Ensure all dependencies are correctly specified in `requirements.txt`
+- Check that the frontend builds successfully with `npm run build`
+
+### Runtime Issues
+- Check the HuggingFace Space logs for Python/FastAPI errors
+- Verify that the uvify package is correctly installed and accessible
+
+### CORS Issues
+- The server.py is configured to allow all origins for HuggingFace deployment
+- If you need to restrict origins, modify the CORS middleware in `server.py` 

Dockerfile

@@ -0,0 +1,72 @@
+# Multi-stage build for uvify HuggingFace app
+FROM node:20-slim AS frontend-builder
+
+# Set working directory for frontend build
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install Node.js dependencies
+RUN npm ci
+
+# Copy frontend source code
+COPY src/ ./src/
+COPY public/ ./public/
+COPY index.html ./
+COPY vite.config.ts ./
+COPY tsconfig*.json ./
+COPY tailwind.config.js ./
+COPY postcss.config.js ./
+COPY eslint.config.js ./
+
+# Build the frontend for production
+RUN npm run build
+
+# Production stage
+FROM python:3.10-slim
+
+# Create a non-root user
+RUN useradd --create-home --shell /bin/bash user
+
+# Set working directory
+WORKDIR /app
+
+# Install system dependencies and uv
+RUN apt-get update && apt-get install -y \
+    curl \
+    git \
+    && rm -rf /var/lib/apt/lists/*
+
+# Install uv for fast Python package management
+RUN pip install uv
+
+# Copy frontend build from previous stage
+COPY --chown=user --from=frontend-builder /app/dist ./static
+
+# Copy Python backend files
+COPY --chown=user server.py ./
+COPY --chown=user requirements.txt ./
+
+# Install Python dependencies using uv
+RUN uv pip install --system -r requirements.txt
+
+# Change ownership of the app directory to user
+RUN chown -R user:user /app
+
+# Switch to non-root user
+USER user
+
+# Expose port 7860 (HuggingFace default)
+EXPOSE 7860
+
+# Set environment variables
+ENV PORT=7860
+ENV PYTHONPATH=/app
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=30s --start-period=5s --retries=3 \
+    CMD curl -f http://localhost:7860/docs || exit 1
+
+# Run the production server
+CMD ["python", "server.py"] 

README.md

@@ -1,12 +1,111 @@
----
-title: Uvify
-emoji: 🐢
-colorFrom: purple
-colorTo: blue
-sdk: docker
-pinned: false
-license: mit
-short_description: Python Manager
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Uvify UI
+
+A modern web interface for [uvify](https://github.com/avilum/uvify) - Turn Python repositories into uv environment oneliners.
+
+## Features
+
+- 🚀 Analyze GitHub repositories and local directories
+- 📦 Parse dependencies from requirements.txt, pyproject.toml, and setup.py
+- 🎯 Generate ready-to-use `uv` commands
+- 📋 Copy commands and download results as JSON
+- 🎨 Beautiful, GitIngest-inspired UI
+
+## Quick Start
+
+### Prerequisites
+
+- Node.js 18+
+- Python 3.8+
+- [uv](https://github.com/astral-sh/uv) package manager
+
+Install uv if you haven't already:
+```bash
+curl -LsSf https://astral.sh/uv/install.sh | sh
+# or on macOS:
+brew install uv
+```
+
+### Installation & Running
+
+The easiest way to run both the UI and API servers:
+
+```bash
+npm start
+```
+
+This will:
+1. Install all dependencies (if needed)
+2. Start the uvify API server on http://localhost:8000
+3. Start the UI development server on http://localhost:5173
+
+### Manual Setup
+
+If you prefer to run the servers separately:
+
+1. Install dependencies:
+```bash
+npm install
+uv venv
+source .venv/bin/activate
+uv pip install 'uvify[api]'
+```
+
+2. Start the API server:
+```bash
+npm run start:api
+```
+
+3. In another terminal, start the UI:
+```bash
+npm run start:ui
+```
+
+## Usage
+
+1. Enter a GitHub repository URL or username/repo format
+2. Click "Analyze" to process the repository
+3. View the results showing:
+   - Parsed dependencies per file
+   - Ready-to-use `uv` commands
+   - Python version requirements
+   - Directory structure
+
+## Development
+
+### Project Structure
+
+```
+uvifyUI/
+├── src/
+│   ├── components/     # React components
+│   ├── services/       # API integration
+│   └── types/          # TypeScript types
+├── public/             # Static assets
+└── start.sh           # Unified start script
+```
+
+### Available Scripts
+
+- `npm start` - Run both UI and API servers
+- `npm run dev` - Run UI development server only
+- `npm run build` - Build for production
+- `npm run lint` - Run ESLint
+
+## Environment Variables
+
+Copy `.env.example` to `.env` and configure:
+
+```
+VITE_API_URL=http://localhost:8000
+```
+
+## Built With
+
+- React + TypeScript
+- Vite
+- Tailwind CSS
+- uvify API backend
+
+## License
+
+This project is built on top of uvify. See the [uvify repository](https://github.com/avilum/uvify) for license information.

eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { globalIgnores } from 'eslint/config'
+
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,35 @@
+{
+  "name": "uvify-ui",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "start": "./start.sh",
+    "start:ui": "vite",
+    "start:api": "source .venv/bin/activate && python -m uvicorn src.uvify:api --host 0.0.0.0 --port 8000"
+  },
+  "dependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.30.1",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.6.0",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.30.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.17",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.35.1",
+    "vite": "^7.0.4"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

requirements.txt

@@ -0,0 +1,4 @@
+uvify[api]
+fastapi
+uvicorn
+python-multipart 

server.py

@@ -0,0 +1,60 @@
+#!/usr/bin/env python3
+"""
+Production server for uvify HuggingFace deployment
+Serves both React frontend and FastAPI backend together
+"""
+import os
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse
+import uvify
+
+# Create a new FastAPI app that combines everything
+app = FastAPI(
+    title="Uvify",
+    description="Analyze GitHub repositories to generate uv commands",
+    version="1.0.0"
+)
+
+# Add CORS middleware for HuggingFace deployment
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # Allow all origins for HuggingFace
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Mount the uvify API under /api prefix to avoid conflicts
+app.mount("/api", uvify.api, name="uvify_api")
+
+# Mount static files for the built React app
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+# Serve the React app for the root route
+@app.get("/")
+async def serve_index():
+    """Serve the React app index page"""
+    return FileResponse("static/index.html")
+
+# Serve the React app for all other frontend routes
+@app.get("/{path:path}")
+async def serve_frontend(path: str):
+    """Serve static files or fallback to React app for client-side routing"""
+    # Skip API routes - they're handled by the mounted API
+    if path.startswith("api/"):
+        return {"error": "API route not found"}
+    
+    # Try to serve static file first (CSS, JS, images, etc.)
+    file_path = f"static/{path}"
+    if os.path.exists(file_path) and os.path.isfile(file_path):
+        return FileResponse(file_path)
+    
+    # Fallback to React app index.html for client-side routing
+    return FileResponse("static/index.html")
+
+if __name__ == "__main__":
+    import uvicorn
+    port = int(os.environ.get("PORT", 7860))
+    uvicorn.run(app, host="0.0.0.0", port=port) 

src/App.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import Header from './components/Header';
+import Hero from './components/Hero';
+import Results from './components/Results';
+import { analyzeRepository } from './services/uvifyApi';
+import type { UvifyResult } from './types/uvify';
+
+function App() {
+  const [results, setResults] = useState<UvifyResult[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string>('');
+  const [currentSource, setCurrentSource] = useState<string>('');
+
+  const handleAnalyze = async (source: string) => {
+    setIsLoading(true);
+    setError('');
+    setResults([]);
+    setCurrentSource(source);
+
+    try {
+      const data = await analyzeRepository(source);
+      setResults(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to analyze repository');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-900 text-white">
+      <Header />
+      <Hero onAnalyze={handleAnalyze} isLoading={isLoading} />
+      <Results results={results} source={currentSource} error={error} />
+    </div>
+  );
+}
+
+export default App

src/components/Header.tsx

@@ -0,0 +1,31 @@
+const Header = () => {
+  return (
+    <header className="bg-gray-900 border-b border-gray-800">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center h-16">
+          <h1 className="text-2xl font-bold">
+            <a href="/" className="flex items-center gap-1">
+              <span className="text-uvify-blue">Uv</span>
+              <span className="text-uvify-purple">ify</span>
+            </a>
+          </h1>
+          <nav className="flex items-center gap-6">
+            <a
+              href="https://github.com/avilum/uvify"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 text-gray-300 hover:text-white transition-colors"
+            >
+              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+              </svg>
+              GitHub
+            </a>
+          </nav>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default Header;

src/components/Hero.tsx

@@ -0,0 +1,100 @@
+import { useState } from 'react';
+
+interface HeroProps {
+  onAnalyze: (source: string) => void;
+  isLoading: boolean;
+}
+
+const Hero = ({ onAnalyze, isLoading }: HeroProps) => {
+  const [source, setSource] = useState('');
+  
+  const exampleRepos = [
+    { name: 'requests', url: 'psf/requests' },
+    { name: 'FastAPI', url: 'fastapi/fastapi' },
+    { name: 'Flask', url: 'pallets/flask' },
+    { name: 'Black', url: 'psf/black' },
+    { name: 'Poetry', url: 'python-poetry/poetry' },
+  ];
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (source.trim()) {
+      onAnalyze(source.trim());
+    }
+  };
+
+  const handleExample = (url: string) => {
+    setSource(url);
+    onAnalyze(url);
+  };
+
+  return (
+    <section className="py-12 px-4">
+      <div className="max-w-4xl mx-auto">
+        <div className="text-center mb-10">
+          <div className="flex justify-center items-center gap-4 mb-6">
+            <span className="text-6xl">⚡</span>
+            <h1 className="text-5xl font-bold">
+              <span className="text-gray-100">Python Environment</span>
+              <br />
+              <span className="bg-gradient-to-r from-uvify-blue to-uvify-purple bg-clip-text text-transparent">
+                Simplified
+              </span>
+            </h1>
+            <span className="text-6xl">🐍</span>
+          </div>
+          <p className="text-xl text-gray-400 mb-2">
+            Turn any Python repository into a uv environment oneliner.
+          </p>
+          <p className="text-lg text-gray-500">
+            Analyze dependencies from requirements.txt, pyproject.toml, and setup.py files.
+          </p>
+        </div>
+
+        <div className="bg-gray-800 rounded-2xl p-8 shadow-2xl border border-gray-700">
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <div className="flex gap-3">
+              <input
+                type="text"
+                value={source}
+                onChange={(e) => setSource(e.target.value)}
+                placeholder="https://github.com/owner/repo or owner/repo"
+                className="flex-1 px-4 py-3 bg-gray-900 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-uvify-blue focus:ring-1 focus:ring-uvify-blue"
+                disabled={isLoading}
+              />
+              <button
+                type="submit"
+                disabled={isLoading || !source.trim()}
+                className="px-8 py-3 bg-gradient-to-r from-uvify-blue to-uvify-purple text-white font-semibold rounded-lg hover:shadow-lg transform hover:-translate-y-0.5 transition-all disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
+              >
+                {isLoading ? 'Analyzing...' : 'Analyze'}
+              </button>
+            </div>
+          </form>
+
+          <div className="mt-6">
+            <p className="text-sm text-gray-500 mb-3">Try these example repositories:</p>
+            <div className="flex flex-wrap gap-2">
+              {exampleRepos.map((repo) => (
+                <button
+                  key={repo.name}
+                  onClick={() => handleExample(repo.url)}
+                  className="px-4 py-2 bg-gray-700 hover:bg-gray-600 text-gray-300 rounded-md text-sm transition-colors"
+                  disabled={isLoading}
+                >
+                  {repo.name}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <p className="text-center text-gray-500 text-sm mt-6">
+          Supports GitHub repositories and local directories
+        </p>
+      </div>
+    </section>
+  );
+};
+
+export default Hero;

src/components/Results.tsx

@@ -0,0 +1,167 @@
+import { useState } from 'react';
+import type { UvifyResult } from '../types/uvify';
+
+interface ResultsProps {
+  results: UvifyResult[];
+  source: string;
+  error?: string;
+}
+
+const Results = ({ results, source, error }: ResultsProps) => {
+  const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
+
+  const copyToClipboard = (text: string, index: number) => {
+    navigator.clipboard.writeText(text).then(() => {
+      setCopiedIndex(index);
+      setTimeout(() => setCopiedIndex(null), 2000);
+    });
+  };
+
+  const downloadResults = () => {
+    const dataStr = JSON.stringify(results, null, 2);
+    const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
+    
+    const exportFileDefaultName = `uvify-${source.replace(/[^a-z0-9]/gi, '-')}.json`;
+    
+    const linkElement = document.createElement('a');
+    linkElement.setAttribute('href', dataUri);
+    linkElement.setAttribute('download', exportFileDefaultName);
+    linkElement.click();
+  };
+
+  if (error) {
+    return (
+      <div className="max-w-4xl mx-auto px-4 py-8">
+        <div className="bg-red-900/20 border border-red-800 rounded-lg p-6">
+          <h3 className="text-red-400 font-semibold mb-2">Error</h3>
+          <p className="text-gray-300">{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (results.length === 0) {
+    return null;
+  }
+
+  const totalDeps = results.reduce((acc, r) => acc + r.dependencies.length, 0);
+  const pythonVersions = [...new Set(results.map(r => r.pythonVersion).filter(Boolean))];
+
+  return (
+    <div className="max-w-6xl mx-auto px-4 py-8">
+      <div className="grid md:grid-cols-2 gap-6 mb-8">
+        <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
+          <h3 className="text-lg font-semibold mb-4">Repository Info</h3>
+          <div className="space-y-2 text-sm">
+            <div className="flex justify-between">
+              <span className="text-gray-400">Repository:</span>
+              <span className="font-mono">{source}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-gray-400">Files analyzed:</span>
+              <span>{results.length}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-gray-400">Total dependencies:</span>
+              <span>{totalDeps}</span>
+            </div>
+            {pythonVersions.length > 0 && (
+              <div className="flex justify-between">
+                <span className="text-gray-400">Python versions:</span>
+                <span className="font-mono">{pythonVersions.join(', ')}</span>
+              </div>
+            )}
+          </div>
+          <div className="mt-4 flex gap-3">
+            <button
+              onClick={() => copyToClipboard(JSON.stringify(results, null, 2), -1)}
+              className="flex-1 px-4 py-2 bg-gray-700 hover:bg-gray-600 text-sm rounded-md transition-colors flex items-center justify-center gap-2"
+            >
+              {copiedIndex === -1 ? '✓ Copied!' : '📋 Copy all'}
+            </button>
+            <button
+              onClick={downloadResults}
+              className="flex-1 px-4 py-2 bg-gray-700 hover:bg-gray-600 text-sm rounded-md transition-colors flex items-center justify-center gap-2"
+            >
+              💾 Download
+            </button>
+          </div>
+        </div>
+
+        <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
+          <h3 className="text-lg font-semibold mb-4">Directory Structure</h3>
+          <div className="font-mono text-sm text-gray-400 space-y-1">
+            <div>└── {source.split('/').pop()}/</div>
+            {results.map((result, idx) => (
+              <div key={idx} className="ml-6">
+                {idx === results.length - 1 ? '└── ' : '├── '}
+                {result.file}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <h2 className="text-2xl font-bold mb-6">Analysis Results</h2>
+      
+      <div className="space-y-6">
+        {results.map((result, index) => (
+          <div key={index} className="bg-gray-800 rounded-lg p-6 border border-gray-700">
+            <div className="flex items-start justify-between mb-4">
+              <div>
+                <h3 className="text-xl font-semibold mb-1">
+                  {result.packageName || result.file}
+                </h3>
+                <p className="text-sm text-gray-400">
+                  {result.fileType} • {result.dependencies.length} dependencies
+                  {result.pythonVersion && ` • Python ${result.pythonVersion}`}
+                </p>
+              </div>
+              <button
+                onClick={() => copyToClipboard(result.oneLiner, index)}
+                className="px-3 py-1 bg-gray-700 hover:bg-gray-600 text-sm rounded-md transition-colors"
+              >
+                {copiedIndex === index ? '✓' : '📋'}
+              </button>
+            </div>
+
+            <div className="space-y-4">
+              <div className="bg-gray-900 rounded-lg p-4 overflow-x-auto">
+                <p className="text-xs text-gray-500 mb-2">One-liner command:</p>
+                <code className="text-sm text-green-400 font-mono whitespace-pre">
+                  {result.oneLiner}
+                </code>
+              </div>
+
+              {result.uvInstallFromSource && (
+                <div className="bg-gray-900 rounded-lg p-4 overflow-x-auto">
+                  <p className="text-xs text-gray-500 mb-2">Install from source:</p>
+                  <code className="text-sm text-blue-400 font-mono whitespace-pre">
+                    {result.uvInstallFromSource}
+                  </code>
+                </div>
+              )}
+
+              {result.dependencies.length > 0 && (
+                <div>
+                  <p className="text-sm text-gray-400 mb-2">Dependencies:</p>
+                  <div className="bg-gray-900 rounded-lg p-4">
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                      {result.dependencies.map((dep, depIndex) => (
+                        <code key={depIndex} className="text-sm text-gray-300 font-mono">
+                          {dep}
+                        </code>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Results;

src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

src/services/uvifyApi.ts

@@ -0,0 +1,36 @@
+import type { UvifyResult } from '../types/uvify';
+
+const API_BASE_URL = import.meta.env.VITE_API_URL || (import.meta.env.PROD ? '' : 'http://localhost:8000');
+
+export const analyzeRepository = async (source: string): Promise<UvifyResult[]> => {
+  try {
+    // Clean up the source input
+    let cleanSource = source.trim();
+    
+    // Remove https://github.com/ prefix if present
+    if (cleanSource.startsWith('https://github.com/')) {
+      cleanSource = cleanSource.replace('https://github.com/', '');
+    }
+    
+    // Remove trailing .git if present
+    if (cleanSource.endsWith('.git')) {
+      cleanSource = cleanSource.slice(0, -4);
+    }
+    
+    // Make the API call to the mounted API endpoint
+    const response = await fetch(`${API_BASE_URL}/api/${cleanSource}`);
+    
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(errorText || `HTTP error! status: ${response.status}`);
+    }
+    
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    if (error instanceof Error) {
+      throw error;
+    }
+    throw new Error('An unexpected error occurred');
+  }
+};

src/types/uvify.ts

@@ -0,0 +1,16 @@
+export interface UvifyResult {
+  file: string;
+  fileType: string;
+  oneLiner: string;
+  uvInstallFromSource?: string;
+  dependencies: string[];
+  packageName?: string;
+  pythonVersion?: string;
+  isLocal: boolean;
+}
+
+export interface UvifyRequest {
+  source: string;
+  excludePatterns?: string[];
+  includePatterns?: string[];
+}

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

start.sh

@@ -0,0 +1,63 @@
+#!/bin/bash
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+echo -e "${GREEN}Starting Uvify UI Server...${NC}"
+
+# Check if node_modules exists
+if [ ! -d "node_modules" ]; then
+    echo -e "${YELLOW}Installing Node dependencies...${NC}"
+    npm install
+fi
+
+# Activate Python virtual environment
+if [ -d ".venv" ]; then
+    source .venv/bin/activate
+else
+    echo -e "${YELLOW}Creating Python virtual environment...${NC}"
+    uv venv
+    source .venv/bin/activate
+    echo -e "${YELLOW}Installing Python dependencies...${NC}"
+    uv pip install 'uvify[api]'
+fi
+
+# Create .env file if it doesn't exist
+if [ ! -f ".env" ]; then
+    cp .env.example .env
+    echo -e "${YELLOW}Created .env file from .env.example${NC}"
+fi
+
+# Function to cleanup on exit
+cleanup() {
+    echo -e "\n${YELLOW}Shutting down servers...${NC}"
+    kill $UVIFY_PID $VITE_PID 2>/dev/null
+    exit
+}
+
+trap cleanup EXIT INT TERM
+
+# Start uvify backend server
+echo -e "${GREEN}Starting Uvify backend server on http://localhost:8000${NC}"
+# Use our CORS wrapper to handle cross-origin requests
+python uvify_cors_wrapper.py &
+UVIFY_PID=$!
+
+# Wait a moment for the backend to start
+sleep 2
+
+# Start Vite frontend server
+echo -e "${GREEN}Starting Vite frontend server on http://localhost:5173${NC}"
+npm run dev &
+VITE_PID=$!
+
+echo -e "${GREEN}Both servers are running!${NC}"
+echo -e "Frontend: ${GREEN}http://localhost:5173${NC}"
+echo -e "Backend API: ${GREEN}http://localhost:8000${NC}"
+echo -e "\nPress ${YELLOW}Ctrl+C${NC} to stop both servers"
+
+# Wait for both processes
+wait $UVIFY_PID $VITE_PID

tailwind.config.js

@@ -0,0 +1,19 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        'uvify-blue': '#3B82F6',
+        'uvify-purple': '#8B5CF6',
+      },
+      fontFamily: {
+        'mono': ['Consolas', 'Monaco', 'Courier New', 'monospace'],
+      },
+    },
+  },
+  plugins: [],
+}

tsconfig.app.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

tsconfig.node.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

uvify_cors_wrapper.py

@@ -0,0 +1,23 @@
+#!/usr/bin/env python3
+"""
+CORS wrapper for uvify API
+"""
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+import uvify
+
+# Get the original FastAPI app from uvify
+app = uvify.api
+
+# Add CORS middleware
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["http://localhost:5173", "http://localhost:5174", "http://localhost:5175"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=8000)

vite.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      }
+    }
+  },
+  build: {
+    outDir: 'dist',
+    assetsDir: 'assets',
+  }
+})