Spaces:
Sleeping
Sleeping
update title and english translate
Browse files- README.md +35 -35
- app/server.py +5 -5
README.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
| 1 |
---
|
| 2 |
-
title: minimal-
|
| 3 |
emoji: 💻
|
| 4 |
colorFrom: blue
|
| 5 |
colorTo: red
|
|
@@ -8,72 +8,72 @@ app_file: app/server.py
|
|
| 8 |
pinned: false
|
| 9 |
---
|
| 10 |
|
| 11 |
-
# Minimal Browser Screenshot Experiment
|
| 12 |
|
| 13 |
-
|
| 14 |
|
| 15 |
-
##
|
| 16 |
|
| 17 |
-
-
|
| 18 |
-
-
|
| 19 |
-
-
|
| 20 |
-
-
|
| 21 |
|
| 22 |
-
## Technologies
|
| 23 |
|
| 24 |
- **Backend**: FastAPI, Helium
|
| 25 |
-
- **Frontend**: HTML/JS
|
| 26 |
-
- **
|
| 27 |
-
- **
|
| 28 |
|
| 29 |
-
## Installation
|
| 30 |
|
| 31 |
-
###
|
| 32 |
|
| 33 |
- Python 3.10+
|
| 34 |
- Poetry
|
| 35 |
-
- Docker (
|
| 36 |
|
| 37 |
-
### Installation
|
| 38 |
|
| 39 |
```bash
|
| 40 |
-
#
|
| 41 |
git clone [repo-url]
|
| 42 |
cd minimal-browser-screenshot-experiment
|
| 43 |
|
| 44 |
-
#
|
| 45 |
poetry install
|
| 46 |
|
| 47 |
-
#
|
| 48 |
poetry run uvicorn app.server:app --host 0.0.0.0 --port 7860
|
| 49 |
```
|
| 50 |
|
| 51 |
-
###
|
| 52 |
|
| 53 |
```bash
|
| 54 |
-
#
|
| 55 |
docker build -t minimal-browser-screenshot .
|
| 56 |
|
| 57 |
-
#
|
| 58 |
docker run -p 7860:7860 minimal-browser-screenshot
|
| 59 |
```
|
| 60 |
|
| 61 |
-
##
|
| 62 |
|
| 63 |
-
|
| 64 |
|
| 65 |
-
1.
|
| 66 |
-
2.
|
| 67 |
-
3.
|
| 68 |
|
| 69 |
-
##
|
| 70 |
|
| 71 |
-
1.
|
| 72 |
-
2.
|
| 73 |
-
3.
|
| 74 |
-
4.
|
| 75 |
-
5.
|
| 76 |
|
| 77 |
-
##
|
| 78 |
|
| 79 |
-
Helium
|
|
|
|
| 1 |
---
|
| 2 |
+
title: minimal-helium-experiment
|
| 3 |
emoji: 💻
|
| 4 |
colorFrom: blue
|
| 5 |
colorTo: red
|
|
|
|
| 8 |
pinned: false
|
| 9 |
---
|
| 10 |
|
| 11 |
+
# Minimal Browser Screenshot Experiment with Helium
|
| 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 Helium (Chrome browser)
|
| 20 |
+
- Display of results in the interface
|
| 21 |
|
| 22 |
+
## Technologies Used
|
| 23 |
|
| 24 |
- **Backend**: FastAPI, Helium
|
| 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 |
+
# Launch the application
|
| 48 |
poetry run uvicorn app.server:app --host 0.0.0.0 --port 7860
|
| 49 |
```
|
| 50 |
|
| 51 |
+
### Using Docker
|
| 52 |
|
| 53 |
```bash
|
| 54 |
+
# Build the Docker image
|
| 55 |
docker build -t minimal-browser-screenshot .
|
| 56 |
|
| 57 |
+
# Run the container
|
| 58 |
docker run -p 7860:7860 minimal-browser-screenshot
|
| 59 |
```
|
| 60 |
|
| 61 |
+
## Deployment on Hugging Face Spaces
|
| 62 |
|
| 63 |
+
This application is designed to be easily deployed on a Hugging Face Space.
|
| 64 |
|
| 65 |
+
1. Create a new Docker-type Space
|
| 66 |
+
2. Associate this GitHub repository with your Space
|
| 67 |
+
3. The Space will automatically use the provided Dockerfile to build and deploy the application
|
| 68 |
|
| 69 |
+
## Usage
|
| 70 |
|
| 71 |
+
1. Access the application through your browser
|
| 72 |
+
2. Enter the URL of the site you want to screenshot (default: Open LLM Leaderboard)
|
| 73 |
+
3. Click "Take a screenshot"
|
| 74 |
+
4. Wait a few seconds for the headless browser to load the page and take the screenshot
|
| 75 |
+
5. The screenshot appears in the interface
|
| 76 |
|
| 77 |
+
## About Helium
|
| 78 |
|
| 79 |
+
Helium is a Python library that simplifies browser automation. It's an abstraction layer on top of Selenium that offers a simpler and more intuitive API. Helium was chosen to replace Playwright in this project to demonstrate its ease of use.
|
app/server.py
CHANGED
|
@@ -51,25 +51,25 @@ async def take_screenshot(url: str = Form(...)):
|
|
| 51 |
logger.info(f"HOME env: {os.environ.get('HOME')}")
|
| 52 |
logger.info(f"Current working directory: {os.getcwd()}")
|
| 53 |
|
| 54 |
-
#
|
| 55 |
logger.info("Launching Chrome browser")
|
| 56 |
driver = start_chrome(headless=True)
|
| 57 |
|
| 58 |
try:
|
| 59 |
-
#
|
| 60 |
logger.info(f"Navigating to URL: {url}")
|
| 61 |
go_to(url)
|
| 62 |
|
| 63 |
-
#
|
| 64 |
logger.info("Waiting for page to load")
|
| 65 |
time.sleep(3)
|
| 66 |
|
| 67 |
-
#
|
| 68 |
logger.info(f"Taking screenshot at {filepath}")
|
| 69 |
driver.save_screenshot(filepath)
|
| 70 |
logger.info(f"Screenshot saved to {filepath}")
|
| 71 |
finally:
|
| 72 |
-
#
|
| 73 |
kill_browser()
|
| 74 |
logger.info("Browser closed")
|
| 75 |
|
|
|
|
| 51 |
logger.info(f"HOME env: {os.environ.get('HOME')}")
|
| 52 |
logger.info(f"Current working directory: {os.getcwd()}")
|
| 53 |
|
| 54 |
+
# Launch Chrome with simple options
|
| 55 |
logger.info("Launching Chrome browser")
|
| 56 |
driver = start_chrome(headless=True)
|
| 57 |
|
| 58 |
try:
|
| 59 |
+
# Navigate to URL
|
| 60 |
logger.info(f"Navigating to URL: {url}")
|
| 61 |
go_to(url)
|
| 62 |
|
| 63 |
+
# Wait for page to load
|
| 64 |
logger.info("Waiting for page to load")
|
| 65 |
time.sleep(3)
|
| 66 |
|
| 67 |
+
# Take the screenshot
|
| 68 |
logger.info(f"Taking screenshot at {filepath}")
|
| 69 |
driver.save_screenshot(filepath)
|
| 70 |
logger.info(f"Screenshot saved to {filepath}")
|
| 71 |
finally:
|
| 72 |
+
# Always close the browser
|
| 73 |
kill_browser()
|
| 74 |
logger.info("Browser closed")
|
| 75 |
|