minor design fixes | update upload url api calls

frontend/src/components/Benchmark/CreateForm.jsx

@@ -30,7 +30,7 @@ import CloseIcon from "@mui/icons-material/Close";
 import PublicIcon from "@mui/icons-material/Public";
 import { useThemeMode } from "../../hooks/useThemeMode";
 import getTheme from "../../config/theme";
-import API_CONFIG from "../../config/api";
+import { API_CONFIG, apiService } from "../../config/api";
 import { useDocumentSelection } from "./hooks/useDocumentSelection";
 
 /**
@@ -123,8 +123,8 @@ function CreateForm({ onStartGeneration }) {
       // Mettre à jour l'état du document pour la modale
       setModalDocument(doc);
 
-      const response = await fetch(`/${doc.id}.${extension}`);
-      const text = await response.text();
+      // Utiliser apiService au lieu de fetch
+      const text = await apiService.getDocumentContent(doc.id, extension);
 
       setDocumentContent(text);
       setOpenContentModal(true);
@@ -151,27 +151,17 @@ function CreateForm({ onStartGeneration }) {
   const handleDownloadDocument = async (doc) => {
     setIsDownloading(true);
     try {
-      const link = document.createElement("a");
-      link.href = `/${doc.id}.${
-        doc.id === "the-bitter-lesson"
-          ? "html"
-          : doc.id === "hurricane-faq"
-          ? "md"
-          : "txt"
-      }`;
-      link.setAttribute(
-        "download",
-        `${doc.name}.${
-          doc.id === "the-bitter-lesson"
-            ? "html"
-            : doc.id === "hurricane-faq"
-            ? "md"
-            : "txt"
-        }`
-      );
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
+      let extension = "";
+      if (doc.id === "the-bitter-lesson") {
+        extension = "html";
+      } else if (doc.id === "hurricane-faq") {
+        extension = "md";
+      } else {
+        extension = "txt";
+      }
+
+      // Utiliser le service API pour télécharger le document
+      await apiService.downloadDocument(doc.id, extension, doc.name);
     } catch (error) {
       console.error("Error downloading document:", error);
       setUploadStatus({
@@ -388,7 +378,7 @@ function CreateForm({ onStartGeneration }) {
                 fullWidth
                 variant="outlined"
                 label="Enter a new URL"
-                placeholder="ex: https://en.wikipedia.org/wiki/Real_Madrid_CF"
+                placeholder="e.g. https://en.wikipedia.org/wiki/Real_Madrid_CF"
                 value={urlInput}
                 onChange={handleUrlInputChange}
                 disabled={isLoading}
@@ -412,7 +402,7 @@ function CreateForm({ onStartGeneration }) {
                 fullWidth
                 variant="outlined"
                 label="Website URL"
-                placeholder="ex:https://en.wikipedia.org/wiki/Real_Madrid_CF"
+                placeholder="e.g. https://en.wikipedia.org/wiki/Real_Madrid_CF"
                 value={urlInput}
                 onChange={handleUrlInputChange}
                 disabled={isLoading}

frontend/src/components/Benchmark/Generator.jsx

@@ -500,8 +500,6 @@ const Generator = ({ sessionId, isDefaultDocument, onComplete }) => {
       elevation={3}
       sx={{
         p: 4,
-        mt: 3,
-        mb: 3,
         display: "flex",
         flexDirection: "column",
         alignItems: "center",

frontend/src/components/Benchmark/hooks/useDocumentSelection.js

@@ -1,5 +1,5 @@
 import { useState, useRef } from "react";
-import API_CONFIG from "../../../config/api";
+import { API_CONFIG, apiService } from "../../../config/api";
 
 /**
  * Hook personnalisé pour gérer la sélection et l'upload de documents
@@ -76,40 +76,27 @@ export const useDocumentSelection = (onStartGeneration) => {
     setSelectedDocument(null);
 
     try {
-      const formData = new FormData();
-      formData.append("file", file);
+      const result = await apiService.uploadFile(file);
 
-      const response = await fetch(`${API_CONFIG.BASE_URL}/upload`, {
-        method: "POST",
-        body: formData,
+      setUploadStatus({
+        success: true,
+        message: "File uploaded successfully",
       });
-
-      const result = await response.json();
-
-      if (response.ok) {
-        setUploadStatus({
-          success: true,
-          message: "File uploaded successfully",
-        });
-        setSessionId(result.session_id);
-        setSelectedDocument({ name: file.name });
-        // Fichier uploadé avec succès, donc on désactive les autres options
-        setIsDefaultDocument(false);
-        setUrlSelected(false);
-        return { success: true };
-      } else {
-        setUploadStatus({
-          success: false,
-          message: result.detail || "Upload failed",
-        });
-        return { success: false, error: result.detail || "Upload failed" };
-      }
+      setSessionId(result.session_id);
+      setSelectedDocument({ name: file.name });
+      // Fichier uploadé avec succès, donc on désactive les autres options
+      setIsDefaultDocument(false);
+      setUrlSelected(false);
+      return { success: true };
     } catch (error) {
       setUploadStatus({
         success: false,
-        message: "Server connection error",
+        message: error.message || "Server connection error",
       });
-      return { success: false, error: "Server connection error" };
+      return {
+        success: false,
+        error: error.message || "Server connection error",
+      };
     } finally {
       setIsLoading(false);
     }
@@ -240,55 +227,37 @@ export const useDocumentSelection = (onStartGeneration) => {
     setIsDefaultDocument(false);
 
     try {
-      // Création d'un FormData pour envoyer l'URL
-      const formData = new FormData();
-      formData.append("url", url);
+      const result = await apiService.uploadUrl(url);
 
-      const response = await fetch(`${API_CONFIG.BASE_URL}/upload-url`, {
-        method: "POST",
-        body: formData,
+      setUploadStatus({
+        success: true,
+        message: "Content from URL uploaded successfully",
       });
-
-      const result = await response.json();
-
-      if (response.ok) {
-        setUploadStatus({
-          success: true,
-          message: "Content from URL uploaded successfully",
-        });
-        setSessionId(result.session_id);
-
-        // Extraire le domaine racine de l'URL
-        let domain = url;
-        try {
-          // Utiliser URL API pour extraire le hostname
-          const urlObj = new URL(
-            url.startsWith("http") ? url : `https://${url}`
-          );
-          domain = urlObj.hostname;
-        } catch (e) {
-          console.log("Error parsing URL, using original:", e);
-        }
-
-        setSelectedDocument({ name: url, domain: domain });
-        setUrlSelected(true);
-        return { success: true };
-      } else {
-        setUploadStatus({
-          success: false,
-          message: result.detail || "URL processing failed",
-        });
-        return {
-          success: false,
-          error: result.detail || "URL processing failed",
-        };
+      setSessionId(result.session_id);
+
+      // Extraire le domaine racine de l'URL
+      let domain = url;
+      try {
+        // Utiliser URL API pour extraire le hostname
+        const urlObj = new URL(url.startsWith("http") ? url : `https://${url}`);
+        domain = urlObj.hostname;
+      } catch (e) {
+        console.error("Error parsing URL:", e);
       }
+
+      setSelectedDocument({
+        name: "URL Content",
+        domain: domain,
+        source_url: result.source_url || url,
+      });
+
+      return { success: true };
     } catch (error) {
       setUploadStatus({
         success: false,
-        message: "Server connection error",
+        message: error.message || "Error processing URL",
       });
-      return { success: false, error: "Server connection error" };
+      return { success: false, error: error.message || "Error processing URL" };
     } finally {
       setIsLoading(false);
     }

frontend/src/config/api.js

@@ -1,4 +1,4 @@
-// API Configuration
+// API Configuration and Service
 const API_CONFIG = {
   // Use the current origin in production
   // In development, use localhost:3001 explicitly
@@ -9,4 +9,181 @@ const API_CONFIG = {
       : window.location.origin,
 };
 
+// API Service for making HTTP requests
+const apiService = {
+  // Generic API call method with error handling
+  async call(endpoint, options = {}) {
+    try {
+      const url = endpoint.startsWith("http")
+        ? endpoint
+        : `${API_CONFIG.BASE_URL}${endpoint}`;
+      const response = await fetch(url, {
+        ...options,
+        headers: {
+          "Content-Type": "application/json",
+          ...options.headers,
+        },
+      });
+
+      // If response is not ok, throw an error
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.detail || `API error: ${response.status}`);
+      }
+
+      // Check if response is JSON or text
+      const contentType = response.headers.get("content-type");
+      if (contentType && contentType.includes("application/json")) {
+        return await response.json();
+      }
+      return await response.text();
+    } catch (error) {
+      console.error("API call failed:", error);
+      throw error;
+    }
+  },
+
+  // GET request
+  async get(endpoint, options = {}) {
+    return await this.call(endpoint, {
+      method: "GET",
+      ...options,
+    });
+  },
+
+  // POST request with JSON data
+  async post(endpoint, data, options = {}) {
+    return await this.call(endpoint, {
+      method: "POST",
+      body: JSON.stringify(data),
+      ...options,
+    });
+  },
+
+  // POST request with FormData
+  async postFormData(endpoint, formData, options = {}) {
+    try {
+      const url = endpoint.startsWith("http")
+        ? endpoint
+        : `${API_CONFIG.BASE_URL}${endpoint}`;
+      const response = await fetch(url, {
+        method: "POST",
+        body: formData,
+        ...options,
+        headers: {
+          // Ne pas définir Content-Type pour FormData
+          ...(options.headers || {}),
+        },
+      });
+
+      // Si response is not ok, throw an error
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.detail || `API error: ${response.status}`);
+      }
+
+      // Check if response is JSON or text
+      const contentType = response.headers.get("content-type");
+      if (contentType && contentType.includes("application/json")) {
+        return await response.json();
+      }
+      return await response.text();
+    } catch (error) {
+      console.error("API FormData call failed:", error);
+      throw error;
+    }
+  },
+
+  // PUT request
+  async put(endpoint, data, options = {}) {
+    return await this.call(endpoint, {
+      method: "PUT",
+      body: JSON.stringify(data),
+      ...options,
+    });
+  },
+
+  // DELETE request
+  async delete(endpoint, options = {}) {
+    return await this.call(endpoint, {
+      method: "DELETE",
+      ...options,
+    });
+  },
+
+  // Upload a file
+  async uploadFile(file) {
+    const formData = new FormData();
+    formData.append("file", file);
+
+    // Utilisation directe de fetch pour éviter les problèmes avec les en-têtes de FormData
+    try {
+      const response = await fetch(`${API_CONFIG.BASE_URL}/upload`, {
+        method: "POST",
+        body: formData,
+        // Ne pas définir le Content-Type pour FormData
+      });
+
+      // Si response is not ok, throw an error
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.detail || `API error: ${response.status}`);
+      }
+
+      return await response.json();
+    } catch (error) {
+      console.error("Upload file failed:", error);
+      throw error;
+    }
+  },
+
+  // Upload content from a URL
+  async uploadUrl(url) {
+    const formData = new FormData();
+    formData.append("url", url);
+
+    // Utilisation directe de fetch pour éviter les problèmes avec les en-têtes de FormData
+    try {
+      const response = await fetch(`${API_CONFIG.BASE_URL}/upload-url`, {
+        method: "POST",
+        body: formData,
+        // Ne pas définir le Content-Type pour FormData
+      });
+
+      // Si response is not ok, throw an error
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.detail || `API error: ${response.status}`);
+      }
+
+      return await response.json();
+    } catch (error) {
+      console.error("Upload URL failed:", error);
+      throw error;
+    }
+  },
+
+  // Get static document content
+  async getDocumentContent(docId, extension) {
+    return await this.get(`/${docId}.${extension}`);
+  },
+
+  // Download document
+  downloadDocument(docId, extension, documentName) {
+    try {
+      const link = document.createElement("a");
+      link.href = `/${docId}.${extension}`;
+      link.setAttribute("download", `${documentName}.${extension}`);
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      return true;
+    } catch (error) {
+      console.error("Download document failed:", error);
+      throw error;
+    }
+  },
+};
+
+export { API_CONFIG, apiService };
 export default API_CONFIG;