update

Dockerfile

@@ -0,0 +1,47 @@
+FROM python:3.10-slim
+
+WORKDIR /app
+
+# Create non-root user
+RUN useradd -m -u 1000 user
+
+# Install system dependencies and Chrome for Playwright
+RUN apt-get update && apt-get install -y \
+    wget \
+    gnupg \
+    curl \
+    && pip install --upgrade pip \
+    && pip install poetry
+
+# Copy poetry configuration
+COPY pyproject.toml poetry.lock* ./
+
+# Install Python dependencies using Poetry
+RUN poetry config virtualenvs.create false \
+    && poetry install --no-interaction --no-ansi --only main
+
+# Install Playwright browsers
+RUN playwright install chromium && \
+    playwright install-deps chromium
+
+# Create directories
+RUN mkdir -p static templates screenshots && \
+    chown -R user:user /app
+
+# Copy application code
+COPY app /app/app
+COPY templates /app/templates
+COPY static /app/static
+
+# Environment variables
+ENV PORT=7860 \
+    HOST=0.0.0.0
+
+# Switch to non-root user
+USER user
+
+# Expose the port
+EXPOSE 7860
+
+# Start command
+CMD ["uvicorn", "app.server:app", "--host", "0.0.0.0", "--port", "7860"] 

README.md

@@ -0,0 +1,69 @@
+# Minimal Browser Screenshot Experiment
+
+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.
+
+## Fonctionnalités
+
+- Interface web simple et réactive
+- Saisie d'URL avec valeur par défaut pointant vers le Open LLM Leaderboard
+- Capture d'écran via Playwright (navigateur Chromium)
+- Affichage du résultat dans l'interface
+
+## Technologies utilisées
+
+- **Backend**: FastAPI, Playwright
+- **Frontend**: HTML/JS avec Tailwind CSS
+- **Gestion des dépendances**: Poetry
+- **Déploiement**: Docker, Hugging Face Spaces
+
+## Installation locale
+
+### Prérequis
+
+- Python 3.10+
+- Poetry
+- Docker (optionnel)
+
+### Installation avec Poetry
+
+```bash
+# Cloner le dépôt
+git clone [url-du-repo]
+cd minimal-browser-screenshot-experiment
+
+# Installer les dépendances
+poetry install
+
+# Installer les navigateurs Playwright
+poetry run playwright install chromium
+poetry run playwright install-deps chromium
+
+# Lancer l'application
+poetry run uvicorn app.server:app --host 0.0.0.0 --port 7860
+```
+
+### Utilisation avec Docker
+
+```bash
+# Construire l'image Docker
+docker build -t minimal-browser-screenshot .
+
+# Lancer le conteneur
+docker run -p 7860:7860 minimal-browser-screenshot
+```
+
+## Déploiement sur Hugging Face Spaces
+
+Cette application est conçue pour être facilement déployée sur un Hugging Face Space.
+
+1. Créez un nouveau Space de type Docker
+2. Associez ce dépôt GitHub à votre Space
+3. Le Space utilisera automatiquement le Dockerfile fourni pour construire et déployer l'application
+
+## Utilisation
+
+1. Accédez à l'application via votre navigateur
+2. Entrez l'URL du site dont vous souhaitez prendre une capture d'écran (par défaut: Open LLM Leaderboard)
+3. Cliquez sur "Prendre une capture d'écran"
+4. Attendez quelques secondes pour que le navigateur headless charge la page et prenne la capture
+5. La capture d'écran s'affiche dans l'interface

app/server.py

@@ -0,0 +1,62 @@
+import os
+import asyncio
+from fastapi import FastAPI, Request, Form
+from fastapi.responses import HTMLResponse, JSONResponse, FileResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+from playwright.async_api import async_playwright
+import uuid
+import logging
+
+# Configure logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+# Create FastAPI app
+app = FastAPI()
+
+# Set up templates and static files
+templates = Jinja2Templates(directory="templates")
+app.mount("/static", StaticFiles(directory="static"), name="static")
+os.makedirs("screenshots", exist_ok=True)
+
+# Mount the screenshots directory
+app.mount("/screenshots", StaticFiles(directory="screenshots"), name="screenshots")
+
+@app.get("/", response_class=HTMLResponse)
+async def read_root(request: Request):
+    return templates.TemplateResponse("index.html", {"request": request})
+
+@app.post("/take-screenshot")
+async def take_screenshot(url: str = Form(...)):
+    logger.info(f"Taking screenshot of URL: {url}")
+    
+    try:
+        # Generate a unique filename
+        filename = f"{uuid.uuid4()}.png"
+        filepath = f"screenshots/{filename}"
+        
+        # Take the screenshot with Playwright
+        async with async_playwright() as p:
+            browser = await p.chromium.launch()
+            page = await browser.new_page()
+            await page.goto(url, wait_until="networkidle")
+            await page.screenshot(path=filepath)
+            await browser.close()
+        
+        return JSONResponse({
+            "success": True,
+            "screenshot_url": f"/screenshots/{filename}"
+        })
+    
+    except Exception as e:
+        logger.error(f"Error taking screenshot: {str(e)}")
+        return JSONResponse({
+            "success": False,
+            "error": str(e)
+        }, status_code=500)
+
+# Add a health check endpoint
+@app.get("/health")
+async def health_check():
+    return {"status": "ok"} 

pyproject.toml

@@ -0,0 +1,19 @@
+[tool.poetry]
+name = "minimal-browser-screenshot"
+version = "0.1.0"
+description = "Application qui prend des captures d'écran de sites web via un navigateur"
+authors = ["HuggingFace Team"]
+readme = "README.md"
+
+[tool.poetry.dependencies]
+python = "^3.10"
+fastapi = "^0.103.1"
+uvicorn = "^0.23.2"
+jinja2 = "^3.1.2"
+python-multipart = "^0.0.6"
+playwright = "^1.39.0"
+aiofiles = "^23.2.1"
+
+[build-system]
+requires = ["poetry-core"]
+build-backend = "poetry.core.masonry.api" 

templates/index.html

@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Capture d'écran du navigateur</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
+      rel="stylesheet"
+    />
+    <style>
+      .loading {
+        display: none;
+      }
+      .screenshot-container {
+        max-width: 100%;
+        overflow-x: auto;
+      }
+      .screenshot-image {
+        max-width: 100%;
+      }
+    </style>
+  </head>
+  <body class="bg-gray-100 min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+      <h1 class="text-3xl font-bold text-center mb-8">
+        Capture d'écran du navigateur
+      </h1>
+
+      <div class="bg-white p-6 rounded-lg shadow-md">
+        <form id="screenshot-form" class="mb-4">
+          <div class="mb-4">
+            <label for="url" class="block text-gray-700 font-medium mb-2"
+              >URL à capturer</label
+            >
+            <input
+              type="url"
+              id="url"
+              name="url"
+              value="https://huggingface.co/spaces/HuggingFaceH4/open_llm_leaderboard"
+              class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              required
+            />
+          </div>
+          <button
+            type="submit"
+            class="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg"
+          >
+            Prendre une capture d'écran
+          </button>
+        </form>
+
+        <div id="loading" class="loading flex justify-center items-center py-8">
+          <svg
+            class="animate-spin -ml-1 mr-3 h-8 w-8 text-blue-500"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <circle
+              class="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              stroke-width="4"
+            ></circle>
+            <path
+              class="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            ></path>
+          </svg>
+          <span class="text-lg text-gray-700">Capture d'écran en cours...</span>
+        </div>
+
+        <div
+          id="error"
+          class="hidden bg-red-100 text-red-700 p-4 rounded-lg mt-4"
+        ></div>
+
+        <div id="screenshot" class="hidden mt-6">
+          <h2 class="text-xl font-semibold mb-4">Résultat :</h2>
+          <div class="screenshot-container border rounded-lg p-2">
+            <img
+              id="screenshot-image"
+              class="screenshot-image mx-auto"
+              src=""
+              alt="Capture d'écran"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      document
+        .getElementById("screenshot-form")
+        .addEventListener("submit", async function (e) {
+          e.preventDefault();
+
+          const url = document.getElementById("url").value;
+          const loadingEl = document.getElementById("loading");
+          const errorEl = document.getElementById("error");
+          const screenshotEl = document.getElementById("screenshot");
+          const screenshotImageEl = document.getElementById("screenshot-image");
+
+          // Reset UI
+          errorEl.classList.add("hidden");
+          errorEl.textContent = "";
+          screenshotEl.classList.add("hidden");
+          loadingEl.style.display = "flex";
+
+          try {
+            // Create form data
+            const formData = new FormData();
+            formData.append("url", url);
+
+            // Send request
+            const response = await fetch("/take-screenshot", {
+              method: "POST",
+              body: formData,
+            });
+
+            const data = await response.json();
+
+            if (response.ok && data.success) {
+              // Show screenshot
+              screenshotImageEl.src = data.screenshot_url;
+              screenshotEl.classList.remove("hidden");
+            } else {
+              // Show error
+              errorEl.textContent =
+                data.error ||
+                "Une erreur est survenue lors de la capture d'écran.";
+              errorEl.classList.remove("hidden");
+            }
+          } catch (error) {
+            // Show error
+            errorEl.textContent =
+              "Une erreur est survenue lors de la connexion au serveur.";
+            errorEl.classList.remove("hidden");
+            console.error(error);
+          } finally {
+            // Hide loading
+            loadingEl.style.display = "none";
+          }
+        });
+    </script>
+  </body>
+</html>