Hugging Face's logo

Spaces:
jurmy24
/
leLab
Running

App Files Community
1
Nicolas Rabault commited on
Commit
a6ba3b9
·
1 Parent(s): f2516c6

Improve instructions

Browse files
Files changed (1) hide show
  1. src/components/landing/UsageInstructionsModal.tsx +65 -66
src/components/landing/UsageInstructionsModal.tsx CHANGED
@@ -25,94 +25,93 @@ const UsageInstructionsModal: React.FC<UsageInstructionsModalProps> = ({
25
  <DialogHeader className="text-center sm:text-center">
26
  <DialogTitle className="text-white flex items-center justify-center gap-2 text-xl">
27
  <Terminal className="w-6 h-6" />
28
- Running LeLab Locally
29
  </DialogTitle>
30
  <DialogDescription>
31
- Instructions for setting up and running the project on your machine.
32
  </DialogDescription>
33
  </DialogHeader>
34
- <div className="space-y-8 text-sm py-4">
35
  <div className="space-y-4">
36
- <h4 className="font-semibold text-gray-100 text-lg mb-2 border-b border-gray-700 pb-2">
37
  1. Installation
38
  </h4>
39
- <p>
40
- Clone the repository from GitHub:{" "}
41
- <a
42
- href="https://github.com/nicolas-rabault/leLab"
43
- target="_blank"
44
- rel="noopener noreferrer"
45
- className="text-blue-400 hover:underline"
46
- >
47
- nicolas-rabault/leLab
48
- </a>
49
  </p>
50
- <pre className="bg-gray-800 p-3 rounded-md text-xs overflow-x-auto text-left">
51
- <code>
52
- git clone https://github.com/nicolas-rabault/leLab
53
- <br />
54
- cd leLab
55
  </code>
56
  </pre>
57
- <p className="mt-2 font-medium text-gray-200">
58
- Install dependencies (virtual environment recommended):
59
- </p>
60
- <pre className="bg-gray-800 p-3 rounded-md text-xs overflow-x-auto text-left">
61
- <code>
62
- # Create and activate virtual environment
63
- <br />
64
  python -m venv .venv
65
- <br />
66
- source .venv/bin/activate
67
- <br />
68
- <br />
69
- # Install in editable mode
70
- <br />
71
- pip install -e .
72
  </code>
 
 
 
 
 
 
 
 
 
 
 
 
73
  </pre>
 
 
 
 
 
 
 
 
 
 
 
74
  </div>
 
75
  <div className="space-y-4">
76
- <h4 className="font-semibold text-gray-100 text-lg mb-2 border-b border-gray-700 pb-2">
77
- 2. Running the Application
78
  </h4>
79
- <p>After installation, use one of the command-line tools:</p>
80
- <ul className="space-y-4 text-xs text-left">
81
- <li>
82
- <code className="bg-gray-800 p-1 rounded font-mono text-sm">
83
- lelab
84
- </code>
85
- <p className="text-gray-400 mt-1">
86
- Starts only the FastAPI backend server on{" "}
87
- <a
88
- href={baseUrl}
89
- target="_blank"
90
- rel="noopener noreferrer"
91
- className="text-blue-400 hover:underline"
92
- >
93
- {baseUrl}
94
- </a>
95
- .
96
- </p>
97
- </li>
98
- <li>
99
- <code className="bg-gray-800 p-1 rounded font-mono text-sm">
100
  lelab-fullstack
101
  </code>
102
- <p className="text-gray-400 mt-1">
103
- Starts both FastAPI backend (port 8000) and this Vite frontend
104
- (port 8080).
105
  </p>
106
- </li>
107
- <li>
108
- <code className="bg-gray-800 p-1 rounded font-mono text-sm">
109
  lelab-frontend
110
  </code>
111
- <p className="text-gray-400 mt-1">
112
- Starts only the frontend development server.
113
  </p>
114
- </li>
115
- </ul>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
116
  </div>
117
  </div>
118
  </DialogContent>
 
25
  <DialogHeader className="text-center sm:text-center">
26
  <DialogTitle className="text-white flex items-center justify-center gap-2 text-xl">
27
  <Terminal className="w-6 h-6" />
28
+ Getting Started with LeLab
29
  </DialogTitle>
30
  <DialogDescription>
31
+ Quick setup guide to get LeLab running on your machine.
32
  </DialogDescription>
33
  </DialogHeader>
34
+ <div className="space-y-6 text-sm py-4">
35
  <div className="space-y-4">
36
+ <h4 className="font-semibold text-gray-100 text-lg mb-3 border-b border-gray-700 pb-2">
37
  1. Installation
38
  </h4>
39
+ <p className="text-gray-300 leading-relaxed">
40
+ Install LeLab directly from GitHub (virtual environment
41
+ recommended):
 
 
 
 
 
 
 
42
  </p>
43
+ <pre className="bg-gray-800 p-4 rounded-lg text-xs overflow-x-auto text-left border border-gray-700">
44
+ <code className="text-green-400">
45
+ pip install git+https://github.com/nicolas-rabault/leLab
 
 
46
  </code>
47
  </pre>
48
+ <p className="text-gray-400 text-xs mt-2">
49
+ 💡 <strong>Tip:</strong> Create a virtual environment first with{" "}
50
+ <code className="bg-gray-800 px-1 rounded text-xs">
 
 
 
 
51
  python -m venv .venv
 
 
 
 
 
 
 
52
  </code>
53
+ </p>
54
+ </div>
55
+
56
+ <div className="space-y-4">
57
+ <h4 className="font-semibold text-gray-100 text-lg mb-3 border-b border-gray-700 pb-2">
58
+ 2. Running LeLab
59
+ </h4>
60
+ <p className="text-gray-300 leading-relaxed">
61
+ After installation, start LeLab with:
62
+ </p>
63
+ <pre className="bg-gray-800 p-4 rounded-lg text-xs overflow-x-auto text-left border border-gray-700">
64
+ <code className="text-blue-400">lelab</code>
65
  </pre>
66
+ <p className="text-gray-300 leading-relaxed">
67
+ This will start the FastAPI backend server on{" "}
68
+ <a
69
+ href={baseUrl}
70
+ target="_blank"
71
+ rel="noopener noreferrer"
72
+ className="text-blue-400 hover:underline font-medium"
73
+ >
74
+ {baseUrl}
75
+ </a>
76
+ </p>
77
  </div>
78
+
79
  <div className="space-y-4">
80
+ <h4 className="font-semibold text-gray-100 text-lg mb-3 border-b border-gray-700 pb-2">
81
+ 3. Additional Commands
82
  </h4>
83
+ <div className="space-y-3">
84
+ <div>
85
+ <code className="bg-gray-800 px-2 py-1 rounded font-mono text-sm text-yellow-400">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
86
  lelab-fullstack
87
  </code>
88
+ <p className="text-gray-400 text-xs mt-1 ml-2">
89
+ Starts both backend and frontend development servers
 
90
  </p>
91
+ </div>
92
+ <div>
93
+ <code className="bg-gray-800 px-2 py-1 rounded font-mono text-sm text-purple-400">
94
  lelab-frontend
95
  </code>
96
+ <p className="text-gray-400 text-xs mt-1 ml-2">
97
+ Starts only the frontend development server
98
  </p>
99
+ </div>
100
+ </div>
101
+ </div>
102
+
103
+ <div className="pt-4 border-t border-gray-700">
104
+ <p className="text-gray-400 text-xs text-center">
105
+ For detailed documentation, visit the{" "}
106
+ <a
107
+ href="https://github.com/nicolas-rabault/leLab"
108
+ target="_blank"
109
+ rel="noopener noreferrer"
110
+ className="text-blue-400 hover:underline font-medium"
111
+ >
112
+ LeLab GitHub repository
113
+ </a>
114
+ </p>
115
  </div>
116
  </div>
117
  </DialogContent>