Spaces:
Sleeping
Sleeping
File size: 9,231 Bytes
e067c2d 47bba68 e067c2d 47bba68 e067c2d 47bba68 e067c2d 47bba68 e067c2d 47bba68 e067c2d 47bba68 e067c2d |
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 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 |
import React from 'react';
import { BookOpen, Users, Code, FileText, GraduationCap, Calendar } from 'lucide-react';
export const GroupInfo: React.FC = () => {
return (
<div className="h-full overflow-auto" style={{ backgroundColor: '#0a0a0b' }}>
<div className="max-w-4xl mx-auto py-12 px-8">
{/* Paper-style header */}
<header className="text-center mb-12 pb-8 border-b border-zinc-800">
<p className="text-xs uppercase tracking-[0.3em] text-zinc-500 mb-4 font-medium">
Artificial Intelligence Project
</p>
<h1 className="text-2xl font-serif text-zinc-100 mb-4 leading-tight">
Package Delivery Search Agent:<br />
<span className="text-zinc-400">A Comparative Study of Informed and Uninformed Search Algorithms</span>
</h1>
<div className="flex items-center justify-center gap-2 text-xs text-zinc-500 mt-6">
<Calendar className="w-3.5 h-3.5" />
<span>Academic Year 2025-2026</span>
</div>
</header>
{/* Authors section */}
<section className="mb-10">
<div className="flex items-center gap-2 mb-4">
<Users className="w-4 h-4 text-zinc-500" />
<h2 className="text-sm font-semibold text-zinc-300 uppercase tracking-wider">Team Members</h2>
</div>
<div className="grid grid-cols-2 gap-4">
{[
{ name: 'Kacem Mathlouthi', role: 'GL 4/2' },
{ name: 'Mohamed Amine Houas', role: 'GL 4/1' },
{ name: 'Oussema Kraiem', role: 'GL 4/2' },
{ name: 'Alaeddine El Zaouali', role: 'GL 4/2' },
].map((author) => (
<div key={author.name} className="bg-zinc-900/50 border border-zinc-800 rounded-lg p-4">
<p className="text-zinc-200 font-medium">{author.name}</p>
<p className="text-xs text-zinc-500 mt-0.5">{author.role}</p>
</div>
))}
</div>
</section>
{/* Abstract */}
<section className="mb-10">
<div className="flex items-center gap-2 mb-4">
<FileText className="w-4 h-4 text-zinc-500" />
<h2 className="text-sm font-semibold text-zinc-300 uppercase tracking-wider">Abstract</h2>
</div>
<div className="bg-zinc-900/30 border-l-2 border-zinc-700 pl-4 py-2 text-sm text-zinc-400 leading-relaxed text-justify">
<p>
This project presents an interactive visualization tool for comparing search algorithms in the context
of package delivery optimization. We implement and analyze six fundamental search strategies: Breadth-First
Search (BFS), Depth-First Search (DFS), Iterative Deepening Search (IDS), Uniform Cost Search (UCS),
Greedy Best-First Search, and A* Search. The system models a grid-based city environment with varying
traffic conditions, blocked roads, and tunnel shortcuts, providing a comprehensive testbed for evaluating
algorithm performance in terms of path optimality, computational efficiency, and memory utilization.
</p>
</div>
</section>
{/* Project Details */}
<section className="mb-10">
<div className="flex items-center gap-2 mb-4">
<Code className="w-4 h-4 text-zinc-500" />
<h2 className="text-sm font-semibold text-zinc-300 uppercase tracking-wider">Technical Implementation</h2>
</div>
<div className="grid grid-cols-2 gap-4 text-sm">
<div className="space-y-3">
<div>
<p className="text-zinc-500 text-xs uppercase tracking-wider mb-1">Backend</p>
<p className="text-zinc-300">Python 3.11 + FastAPI</p>
</div>
<div>
<p className="text-zinc-500 text-xs uppercase tracking-wider mb-1">Frontend</p>
<p className="text-zinc-300">React 19 + TypeScript + Vite</p>
</div>
<div>
<p className="text-zinc-500 text-xs uppercase tracking-wider mb-1">State Management</p>
<p className="text-zinc-300">Zustand</p>
</div>
</div>
<div className="space-y-3">
<div>
<p className="text-zinc-500 text-xs uppercase tracking-wider mb-1">Visualization</p>
<p className="text-zinc-300">SVG + ShadCN</p>
</div>
<div>
<p className="text-zinc-500 text-xs uppercase tracking-wider mb-1">Styling</p>
<p className="text-zinc-300">Tailwind CSS v4</p>
</div>
<div>
<p className="text-zinc-500 text-xs uppercase tracking-wider mb-1">Communication</p>
<p className="text-zinc-300">REST API</p>
</div>
</div>
</div>
</section>
{/* Algorithms */}
<section className="mb-10">
<div className="flex items-center gap-2 mb-4">
<GraduationCap className="w-4 h-4 text-zinc-500" />
<h2 className="text-sm font-semibold text-zinc-300 uppercase tracking-wider">Implemented Algorithms</h2>
</div>
<div className="overflow-hidden rounded-lg border border-zinc-800">
<table className="w-full text-sm">
<thead>
<tr className="bg-zinc-900/50">
<th className="text-left px-4 py-2 text-zinc-400 font-medium">Algorithm</th>
<th className="text-left px-4 py-2 text-zinc-400 font-medium">Type</th>
<th className="text-left px-4 py-2 text-zinc-400 font-medium">Optimal</th>
<th className="text-left px-4 py-2 text-zinc-400 font-medium">Complete</th>
</tr>
</thead>
<tbody className="divide-y divide-zinc-800">
{[
{ name: 'Breadth-First Search', code: 'BFS', type: 'Uninformed', optimal: 'Yes*', complete: 'Yes' },
{ name: 'Depth-First Search', code: 'DFS', type: 'Uninformed', optimal: 'No', complete: 'No' },
{ name: 'Iterative Deepening', code: 'IDS', type: 'Uninformed', optimal: 'Yes*', complete: 'Yes' },
{ name: 'Uniform Cost Search', code: 'UCS', type: 'Uninformed', optimal: 'Yes', complete: 'Yes' },
{ name: 'Greedy Best-First', code: 'GBFS', type: 'Informed', optimal: 'No', complete: 'No' },
{ name: 'A* Search', code: 'A*', type: 'Informed', optimal: 'Yes', complete: 'Yes' },
].map((algo) => (
<tr key={algo.code} className="hover:bg-zinc-900/30 transition-colors">
<td className="px-4 py-2">
<span className="text-zinc-300">{algo.name}</span>
<span className="text-zinc-600 text-xs ml-2">({algo.code})</span>
</td>
<td className="px-4 py-2 text-zinc-400">{algo.type}</td>
<td className="px-4 py-2 text-zinc-400 font-mono">{algo.optimal}</td>
<td className="px-4 py-2 text-zinc-400 font-mono">{algo.complete}</td>
</tr>
))}
</tbody>
</table>
</div>
<p className="text-xs text-zinc-600 mt-2 italic">* When step costs are uniform</p>
</section>
{/* Heuristics */}
<section className="mb-10">
<div className="flex items-center gap-2 mb-4">
<BookOpen className="w-4 h-4 text-zinc-500" />
<h2 className="text-sm font-semibold text-zinc-300 uppercase tracking-wider">Heuristic Functions</h2>
</div>
<div className="space-y-3 text-sm">
<div className="bg-zinc-900/30 border border-zinc-800 rounded-lg p-4">
<p className="text-zinc-300 font-medium mb-1">Manhattan Distance</p>
<p className="text-zinc-500 font-mono text-xs">h(n) = |x<sub>n</sub> - x<sub>g</sub>| + |y<sub>n</sub> - y<sub>g</sub>|</p>
</div>
<div className="bg-zinc-900/30 border border-zinc-800 rounded-lg p-4">
<p className="text-zinc-300 font-medium mb-1">Euclidean Distance</p>
<p className="text-zinc-500 font-mono text-xs">h(n) = sqrt((x<sub>n</sub> - x<sub>g</sub>)<sup>2</sup> + (y<sub>n</sub> - y<sub>g</sub>)<sup>2</sup>)</p>
</div>
<div className="bg-zinc-900/30 border border-zinc-800 rounded-lg p-4">
<p className="text-zinc-300 font-medium mb-1">Tunnel-Aware Heuristic</p>
<p className="text-zinc-500 text-xs">Considers available tunnel shortcuts to improve estimate accuracy</p>
</div>
</div>
</section>
{/* Footer */}
<footer className="pt-8 border-t border-zinc-800 text-center">
<p className="text-xs text-zinc-700 mt-2">
This project was developed as part of the Artificial Intelligence curriculum
</p>
</footer>
</div>
</div>
);
};
export default GroupInfo;
|