File size: 4,869 Bytes
80b95e8 |
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 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress";
import { Server, Download, Rocket } from "lucide-react";
export function DeploymentSection() {
const systemRequirements = [
{ label: "CPU", value: "Intel i5+ / AMD Ryzen 5+" },
{ label: "RAM", value: "16 GB minimum" },
{ label: "Storage", value: "10 GB+ SSD" },
{ label: "Platform", value: "Windows 11 (primary)" },
{ label: "Python", value: "3.10 (Conda managed)" },
{ label: "Models", value: "CPU-only execution" }
];
const installationSteps = [
{ name: "Conda Environment", progress: 100, status: "✓ Complete", color: "bg-green-400" },
{ name: "sentence-transformers", progress: 100, status: "✓ Complete", color: "bg-green-400" },
{ name: "FAISS + Typer + PyYAML", progress: 100, status: "✓ Complete", color: "bg-green-400" },
{ name: "EmbeddingGemma-300m", progress: 75, status: "⟳ Downloading", color: "bg-yellow-400" },
{ name: "Phi-2 GGUF (Q4_0)", progress: 0, status: "⏳ Pending", color: "bg-muted" }
];
const quickStartSteps = [
{
number: 1,
title: "Conda Setup",
commands: ["conda env create -f environment.yml", "conda activate gemma-phi2-cli", "pip install -e ."],
color: "bg-primary"
},
{
number: 2,
title: "Model Download",
commands: ["python download_models.py", "# Downloads EmbeddingGemma + Phi-2 GGUF"],
color: "bg-accent"
},
{
number: 3,
title: "CLI Usage",
commands: ["gemma-phi2-cli init ./my-project", "git add .", "gemma-phi2-cli commit --preview"],
color: "bg-green-400"
}
];
return (
<section id="deployment" className="space-y-6">
<h2 className="text-2xl font-bold">Deployment & Setup</h2>
<div className="grid md:grid-cols-2 gap-6">
{/* System Requirements */}
<Card className="p-4 border-border">
<h3 className="font-semibold mb-4 flex items-center">
<Server className="mr-2 text-blue-400 w-4 h-4" />
System Requirements
</h3>
<div className="space-y-3 text-sm">
{systemRequirements.map((req, index) => (
<div key={index} className="flex justify-between items-center py-2 border-b border-border/50">
<span className="text-muted-foreground">{req.label}</span>
<span className="font-medium" data-testid={`requirement-${req.label.toLowerCase()}`}>
{req.value}
</span>
</div>
))}
</div>
</Card>
{/* Installation Progress */}
<Card className="p-4 border-border">
<h3 className="font-semibold mb-4 flex items-center">
<Download className="mr-2 text-green-400 w-4 h-4" />
Installation Progress
</h3>
<div className="space-y-4">
{installationSteps.map((step, index) => (
<div key={index} className="space-y-2">
<div className="flex justify-between text-sm">
<span>{step.name}</span>
<span className={
step.status.includes("Complete") ? "text-green-400" :
step.status.includes("Downloading") ? "text-yellow-400" :
"text-muted-foreground"
} data-testid={`install-status-${index}`}>
{step.status}
</span>
</div>
<Progress
value={step.progress}
className="w-full h-2"
data-testid={`install-progress-${index}`}
/>
</div>
))}
</div>
</Card>
</div>
{/* Quick Start Guide */}
<Card className="p-6 border-border">
<h3 className="font-semibold mb-4 flex items-center">
<Rocket className="mr-2 text-primary w-4 h-4" />
Quick Start Guide
</h3>
<div className="grid md:grid-cols-3 gap-6">
{quickStartSteps.map((step, index) => (
<div key={index} className="space-y-3">
<div className={`w-8 h-8 ${step.color} rounded-full flex items-center justify-center text-black font-bold`}>
{step.number}
</div>
<h4 className="font-medium">{step.title}</h4>
<Card className="bg-black/50 p-2 font-mono text-sm border-border">
{step.commands.map((command, cmdIndex) => (
<div key={cmdIndex} data-testid={`quickstart-command-${index}-${cmdIndex}`}>
{command}
</div>
))}
</Card>
</div>
))}
</div>
</Card>
</section>
);
}
|