dockercompose management

README.md

@@ -28,13 +28,13 @@ python wcag_validator_RESTserver.py
 ## For UI use:
 python wcag_validator_ui.py
 
-## Docker
+## Docker (file docker placed at path /LLM_accessibility_validator)
 ### Rest server
 docker build -t wcag_resr_server .
 docker run --env-file .env -p 8000:8000 --name wcag_rest_server -d wcag_rest_server
 ### UI
 docker build -t wcag_ui .
-docker run --env-file UI/.env -p 8001:8001 --name wcag_ui -d wcag_ui
+docker run --env-file UI/.env -p 7860:7860 --name wcag_ui -d wcag_ui
 
 
 ## The scripts folder contains some elaboration scripts. They require a dedicated requirements file

UI/wcag_validator_ui.py

@@ -31,7 +31,6 @@ import sqlite3
 WCAG_VALIDATOR_RESTSERVER_HEADERS = [("Content-Type", "application/json")]
 
 
-
 def load_images_from_json(json_input):
     """Extract URLs and alt text from JSON and create HTML gallery"""
     try:
@@ -225,7 +224,6 @@ def load_llm_assessment_from_json(json_input):
 
             data_frame.append(
                 {
-                    
                     "Original Alt Text": alt_text_original,
                     "LLM Assessment": original_alt_text_assessment,
                     "Proposed Alt Text": new_alt_text,
@@ -245,13 +243,13 @@ def make_alttext_llm_assessment_api_call(
     url,
     selected_images_json=[],
     db_path=None,
-    wcga_rest_server_url="http://localhost:8000",
+    wcag_rest_server_url="http://localhost:8000",
     user_state={},
     number_of_images=30,
 ):
 
     print(
-        f"Making API call for llm assessment for {url} to {wcga_rest_server_url}/wcag_alttext_validation"
+        f"Making API call for llm assessment for {url} to {wcag_rest_server_url}/wcag_alttext_validation"
     )
     selected_images = json.loads(selected_images_json) if selected_images_json else []
     # print("selected_images:", selected_images)
@@ -299,13 +297,13 @@ def make_alttext_llm_assessment_api_call(
                 "save_elaboration": "True",
                 "specific_images_urls": selected_urls,
             },
-            url=wcga_rest_server_url + "/wcag_alttext_validation",
+            url=wcag_rest_server_url + "/wcag_alttext_validation",
             headers=WCAG_VALIDATOR_RESTSERVER_HEADERS,
         )
         # return response
         info_dataframe = load_llm_assessment_from_json(response)
         info_dataframe.insert(
-            0, 'Image #', selected_image_id
+            0, "Image #", selected_image_id
         )  # add the UI ids from to api response
 
     except Exception as e:
@@ -334,10 +332,10 @@ def make_alttext_llm_assessment_api_call(
 def make_image_extraction_api_call(
     url,
     number_of_images=30,
-    wcga_rest_server_url="http://localhost:8000",
+    wcag_rest_server_url="http://localhost:8000",
 ):
     print(
-        f"Making API call for image_extraction for {url} to {wcga_rest_server_url}/extract_images"
+        f"Making API call for image_extraction for {url} to {wcag_rest_server_url}/extract_images"
     )
     try:
 
@@ -346,7 +344,7 @@ def make_image_extraction_api_call(
                 "page_url": url,
                 "number_of_images": number_of_images,
             },
-            url=wcga_rest_server_url + "/extract_images",
+            url=wcag_rest_server_url + "/extract_images",
             headers=WCAG_VALIDATOR_RESTSERVER_HEADERS,
         )
         # return response
@@ -369,18 +367,18 @@ with gr.Blocks(theme=gr.themes.Glass(), title="WCAG AI Validator") as demo:
     _ = load_dotenv(env_path)  # read .env file
     db_path = return_from_env_valid("DB_PATH", "persistence/wcag_validator_ui.db")
     print("db_path:", db_path)
-    wcga_rest_server_url = return_from_env_valid(
-        "WCGA_REST_SERVER_URL", "http://localhost:8000"
+    wcag_rest_server_url = return_from_env_valid(
+        "WCAG_REST_SERVER_URL", "http://localhost:8000"
     )
 
     default_urls = [
-    "https://amazon.com",
-    "https://ebay.com",
-     ]
-    url_list_str=return_from_env_valid("URL_LIST",json.dumps(default_urls))
+        "https://amazon.com",
+        "https://ebay.com",
+    ]
+    url_list_str = return_from_env_valid("URL_LIST", json.dumps(default_urls))
     url_list = json.loads(url_list_str)
 
-    print("wcga_rest_server_url:", wcga_rest_server_url)
+    print("wcag_rest_server_url:", wcag_rest_server_url)
 
     connection_db = db_persistence_startup(
         db_name_and_path=db_path, table="wcag_user_assessments"
@@ -434,8 +432,8 @@ with gr.Blocks(theme=gr.themes.Glass(), title="WCAG AI Validator") as demo:
 
     with gr.Tab("Alt Text Assessment", visible=False) as alttext_assessment:
 
-        db_path_state = gr.State(value=db_path)  # Store path in State
-        wcga_rest_server_url_state = gr.State(value=wcga_rest_server_url)
+        db_path_state = gr.State(value=db_path)  # Store path in State\
+        wcag_rest_server_url_state = gr.State(value=wcag_rest_server_url)
         with gr.Row():
             with gr.Column():
 
@@ -498,7 +496,7 @@ with gr.Blocks(theme=gr.themes.Glass(), title="WCAG AI Validator") as demo:
             ],
         ).then(
             make_image_extraction_api_call,
-            inputs=[url_input, images_number, wcga_rest_server_url_state],
+            inputs=[url_input, images_number, wcag_rest_server_url_state],
             outputs=[image_info_output, gallery_html],
         ).then(
             fn=lambda: gr.Button(interactive=True),
@@ -514,7 +512,7 @@ with gr.Blocks(theme=gr.themes.Glass(), title="WCAG AI Validator") as demo:
                 url_input,
                 gallery_html,
                 db_path_state,
-                wcga_rest_server_url_state,
+                wcag_rest_server_url_state,
                 user_state,
             ],
             outputs=[alttext_info_output],

docker/README.md

@@ -0,0 +1,40 @@
+# Create (and eventually run) the two containers
+
+## Docker
+### Rest server
+- docker build -t wcag_resr_server .
+- docker run --env-file .env -p 8000:8000 --name wcag_rest_server -d wcag_rest_server
+### UI
+- docker build -t wcag_ui .
+- docker run --env-file UI/.env -p 7860:7860 --name wcag_ui -d wcag_ui
+
+
+# For network management and env management
+## method 1: Run the docker-compose (skip the runs above)
+
+docker-compose up -d
+
+## method 2: or creating a Docker network
+
+### Create a custom network
+docker network create wcag-network
+
+### Run the backend container
+docker run -d \
+  --name wcag_rest_server \
+  --network wcag-network \
+  --env-file .env \
+  wcag_rest_server
+
+# Run the UI container
+docker run -d \
+  --name wcag_ui \
+  --network wcag-network \
+  -p 7860:7860 \
+  --env-file UI/.env \
+  wcag_ui
+  
+# Important Notes:
+
+- Backend URL in UI: Make sure your UI is configured to connect to the backend using the container name (e.g., wcag_rest_server) not localhost when running in Docker
+- Port exposure: Only the UI needs -p flag to expose ports to your host machine

docker/UI/Dockerfile

@@ -15,7 +15,7 @@ COPY /UI/wcag_validator_ui.py /UI/wcag_validator_ui.py
 EXPOSE 7860
 
 WORKDIR /UI
-CMD ["python","wcag_validator_ui.py"]
+CMD ["python", "-u", "wcag_validator_ui.py"]
 
 
 

docker/docker-compose.yml

@@ -0,0 +1,33 @@
+version: '3.8'
+
+services:
+  backend:
+    image: wcag_rest_server
+    container_name: wcag_rest_server
+    ports:
+      - "8000:8000"  # Adjust to your backend port
+    environment:
+      - MLLM_END_POINT_OPENAI=https://hiis-accessibility-fonderia.cognitiveservices.azure.com/openai/deployments/gpt-4o/chat/completions?api-version=2025-01-01-preview
+      - MLLM_API_KEY_OPENAI=4lwGUwrx7jsqdxESGBpN9wYYyLNsxzC2s8ZLQlZPCQUayDWuDo3NJQQJ99BKACfhMk5XJ3w3AAAAACOGs2uw
+      - MLLM_MODEL_ID_OPENAI=gpt-4o   
+      - USE_OPENAI_MODEL=True      
+    networks:
+      - wcag-network
+
+  ui:
+    image: wcag_ui
+    container_name: wcag_ui
+    ports:
+      - "7860:7860"  # Adjust to your UI port
+    environment:
+      - WCAG_REST_SERVER_URL=http://backend:8000  # UI can reference backend by service name
+      - URL_LIST=["https://amazon.com","https://ebay.com","https://walmart.com","https://etsy.com","https://target.com","https://wayfair.com","https://bestbuy.com","https://macys.com","https://homedepot.com","https://costco.com","https://www.ansa.it","https://en.wikipedia.org/wiki/Main_Page","https://www.lanazione.it","https://www.ansa.it","https://www.bbc.com","https://www.cnn.com","https://www.nytimes.com","https://www.theguardian.com"]
+      - DB_PATH=persistence/wcag_validator_ui.db      
+    depends_on:
+      - backend
+    networks:
+      - wcag-network
+
+networks:
+  wcag-network:
+    driver: bridge