update
Browse files- README.md +33 -33
- app/server.py +2 -2
- templates/index.html +1 -1
README.md
CHANGED
|
@@ -10,70 +10,70 @@ pinned: false
|
|
| 10 |
|
| 11 |
# Minimal Browser Screenshot Experiment
|
| 12 |
|
| 13 |
-
|
| 14 |
|
| 15 |
-
##
|
| 16 |
|
| 17 |
-
-
|
| 18 |
-
-
|
| 19 |
-
-
|
| 20 |
-
-
|
| 21 |
|
| 22 |
-
## Technologies
|
| 23 |
|
| 24 |
- **Backend**: FastAPI, Playwright
|
| 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 [url
|
| 42 |
cd minimal-browser-screenshot-experiment
|
| 43 |
|
| 44 |
-
#
|
| 45 |
poetry install
|
| 46 |
|
| 47 |
-
#
|
| 48 |
poetry run playwright install chromium
|
| 49 |
poetry run playwright install-deps chromium
|
| 50 |
|
| 51 |
-
#
|
| 52 |
poetry run uvicorn app.server:app --host 0.0.0.0 --port 7860
|
| 53 |
```
|
| 54 |
|
| 55 |
-
###
|
| 56 |
|
| 57 |
```bash
|
| 58 |
-
#
|
| 59 |
docker build -t minimal-browser-screenshot .
|
| 60 |
|
| 61 |
-
#
|
| 62 |
docker run -p 7860:7860 minimal-browser-screenshot
|
| 63 |
```
|
| 64 |
|
| 65 |
-
##
|
| 66 |
|
| 67 |
-
|
| 68 |
|
| 69 |
-
1.
|
| 70 |
-
2.
|
| 71 |
-
3.
|
| 72 |
|
| 73 |
-
##
|
| 74 |
|
| 75 |
-
1.
|
| 76 |
-
2.
|
| 77 |
-
3.
|
| 78 |
-
4.
|
| 79 |
-
5.
|
|
|
|
| 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
|
| 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 #
|
| 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
|
| 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"
|