tfrere commited on
Commit
0ef192c
·
1 Parent(s): 8e46fec
Files changed (3) hide show
  1. README.md +33 -33
  2. app/server.py +2 -2
  3. templates/index.html +1 -1
README.md CHANGED
@@ -10,70 +10,70 @@ pinned: false
10
 
11
  # Minimal Browser Screenshot Experiment
12
 
13
- Cette application web permet de prendre des captures d'écran de sites web en utilisant un navigateur headless et de les afficher directement dans l'interface utilisateur.
14
 
15
- ## Fonctionnalités
16
 
17
- - Interface web simple et réactive
18
- - Saisie d'URL avec valeur par défaut pointant vers le Open LLM Leaderboard
19
- - Capture d'écran via Playwright (navigateur Chromium)
20
- - Affichage du résultat dans l'interface
21
 
22
- ## Technologies utilisées
23
 
24
  - **Backend**: FastAPI, Playwright
25
- - **Frontend**: HTML/JS avec Tailwind CSS
26
- - **Gestion des dépendances**: Poetry
27
- - **Déploiement**: Docker, Hugging Face Spaces
28
 
29
- ## Installation locale
30
 
31
- ### Prérequis
32
 
33
  - Python 3.10+
34
  - Poetry
35
- - Docker (optionnel)
36
 
37
- ### Installation avec Poetry
38
 
39
  ```bash
40
- # Cloner le dépôt
41
- git clone [url-du-repo]
42
  cd minimal-browser-screenshot-experiment
43
 
44
- # Installer les dépendances
45
  poetry install
46
 
47
- # Installer les navigateurs Playwright
48
  poetry run playwright install chromium
49
  poetry run playwright install-deps chromium
50
 
51
- # Lancer l'application
52
  poetry run uvicorn app.server:app --host 0.0.0.0 --port 7860
53
  ```
54
 
55
- ### Utilisation avec Docker
56
 
57
  ```bash
58
- # Construire l'image Docker
59
  docker build -t minimal-browser-screenshot .
60
 
61
- # Lancer le conteneur
62
  docker run -p 7860:7860 minimal-browser-screenshot
63
  ```
64
 
65
- ## Déploiement sur Hugging Face Spaces
66
 
67
- Cette application est conçue pour être facilement déployée sur un Hugging Face Space.
68
 
69
- 1. Créez un nouveau Space de type Docker
70
- 2. Associez ce dépôt GitHub à votre Space
71
- 3. Le Space utilisera automatiquement le Dockerfile fourni pour construire et déployer l'application
72
 
73
- ## Utilisation
74
 
75
- 1. Accédez à l'application via votre navigateur
76
- 2. Entrez l'URL du site dont vous souhaitez prendre une capture d'écran (par défaut: Open LLM Leaderboard)
77
- 3. Cliquez sur "Prendre une capture d'écran"
78
- 4. Attendez quelques secondes pour que le navigateur headless charge la page et prenne la capture
79
- 5. La capture d'écran s'affiche dans l'interface
 
10
 
11
  # Minimal Browser Screenshot Experiment
12
 
13
+ This web application allows taking screenshots of websites using a headless browser and displaying them directly in the user interface.
14
 
15
+ ## Features
16
 
17
+ - Simple and responsive web interface
18
+ - URL input with default value pointing to Open LLM Leaderboard
19
+ - Screenshot capture via Playwright (Chromium browser)
20
+ - Display of results in the interface
21
 
22
+ ## Technologies Used
23
 
24
  - **Backend**: FastAPI, Playwright
25
+ - **Frontend**: HTML/JS with Tailwind CSS
26
+ - **Dependency Management**: Poetry
27
+ - **Deployment**: Docker, Hugging Face Spaces
28
 
29
+ ## Local Installation
30
 
31
+ ### Prerequisites
32
 
33
  - Python 3.10+
34
  - Poetry
35
+ - Docker (optional)
36
 
37
+ ### Installation with Poetry
38
 
39
  ```bash
40
+ # Clone the repository
41
+ git clone [repo-url]
42
  cd minimal-browser-screenshot-experiment
43
 
44
+ # Install dependencies
45
  poetry install
46
 
47
+ # Install Playwright browsers
48
  poetry run playwright install chromium
49
  poetry run playwright install-deps chromium
50
 
51
+ # Launch the application
52
  poetry run uvicorn app.server:app --host 0.0.0.0 --port 7860
53
  ```
54
 
55
+ ### Using Docker
56
 
57
  ```bash
58
+ # Build the Docker image
59
  docker build -t minimal-browser-screenshot .
60
 
61
+ # Run the container
62
  docker run -p 7860:7860 minimal-browser-screenshot
63
  ```
64
 
65
+ ## Deployment on Hugging Face Spaces
66
 
67
+ This application is designed to be easily deployed on a Hugging Face Space.
68
 
69
+ 1. Create a new Docker-type Space
70
+ 2. Associate this GitHub repository with your Space
71
+ 3. The Space will automatically use the provided Dockerfile to build and deploy the application
72
 
73
+ ## Usage
74
 
75
+ 1. Access the application through your browser
76
+ 2. Enter the URL of the site you want to screenshot (default: Open LLM Leaderboard)
77
+ 3. Click "Take a screenshot"
78
+ 4. Wait a few seconds for the headless browser to load the page and take the screenshot
79
+ 5. The screenshot appears in the interface
app/server.py CHANGED
@@ -52,7 +52,7 @@ async def take_screenshot(url: str = Form(...)):
52
 
53
  # Take the screenshot with Playwright
54
  async with async_playwright() as p:
55
- # Configuration adaptée pour l'environnement Docker
56
  browser = await p.chromium.launch(
57
  headless=True,
58
  args=[
@@ -65,7 +65,7 @@ async def take_screenshot(url: str = Form(...)):
65
  '--single-process',
66
  '--disable-gpu'
67
  ],
68
- executable_path=None # Utiliser le chemin par défaut
69
  )
70
 
71
  logger.info("Browser launched successfully")
 
52
 
53
  # Take the screenshot with Playwright
54
  async with async_playwright() as p:
55
+ # Configuration adapted for Docker environment
56
  browser = await p.chromium.launch(
57
  headless=True,
58
  args=[
 
65
  '--single-process',
66
  '--disable-gpu'
67
  ],
68
+ executable_path=None # Use default path
69
  )
70
 
71
  logger.info("Browser launched successfully")
templates/index.html CHANGED
@@ -31,7 +31,7 @@
31
  <form id="screenshot-form" class="mb-4">
32
  <div class="mb-4">
33
  <label for="url" class="block text-gray-700 font-medium mb-2"
34
- >URL à capturer</label
35
  >
36
  <input
37
  type="url"
 
31
  <form id="screenshot-form" class="mb-4">
32
  <div class="mb-4">
33
  <label for="url" class="block text-gray-700 font-medium mb-2"
34
+ >URL to capture</label
35
  >
36
  <input
37
  type="url"