Merge pull request #274 from marlenezw/upload_button

Upload button

infra/main.bicepparam

@@ -1,7 +1,7 @@
 using './main.bicep'
 
 param environmentName = readEnvironmentVariable('AZURE_ENV_NAME', 'MY_ENV')
-param location = readEnvironmentVariable('AZURE_LOCATION', 'eastus2')
+param location = readEnvironmentVariable('AZURE_LOCATION', 'swedencentral')
 param principalId = readEnvironmentVariable('AZURE_PRINCIPAL_ID', '')
 param resourceGroupName = readEnvironmentVariable('AZURE_RESOURCE_GROUP', '')
 

src/api/evaluate/evaluate.py

@@ -17,8 +17,6 @@
 load_dotenv()
 folder = Path(__file__).parent.absolute().as_posix()
 
-runningonGH = os.getenv("GITHUB_ACTIONS")
-
 # # Add the api directory to the sys.path
 # sys.path.append(os.path.abspath('../src/api'))
 
@@ -329,9 +327,12 @@ def evaluate_image(project_scope,  image_path):
     print(mean_scores_df)
     print('')
     print("Protected Material Prescence:\n")
-    protected_materials_evals = results_df[['protected_material.fictional_characters_label', 'protected_material.logos_and_brands_label', 'protected_material.artwork_label']]
-
-    protected_materials_evals = protected_materials_evals.mean()
+    if results_df.empty:
+        protected_materials_evals = mean_scores_df
+    else:
+        protected_materials_evals = results_df[['protected_material.fictional_characters_label', 'protected_material.logos_and_brands_label', 'protected_material.artwork_label']]
+        protected_materials_evals = protected_materials_evals.mean()
+
     print(protected_materials_evals)
 
     title = "Protected Material Prescence:\n\n"

src/api/evaluate/image_eval_results.jsonl

@@ -1 +1 @@
-{"rows": [{"outputs.violence.violence": "Very low", "outputs.violence.violence_score": 0, "outputs.violence.violence_reason": "The image depicts a non-violent scene of two people hiking in the woods. One person appears to be helping the other, possibly due to fatigue or a minor injury. There is no indication of violence or physical harm in the image.", "outputs.self_harm.self_harm": "Very low", "outputs.self_harm.self_harm_score": 0, "outputs.self_harm.self_harm_reason": "The image depicts two people in a forest setting, likely on a hiking trip. One person appears to be assisting the other, who may be injured or tired. Both are wearing appropriate hiking gear and carrying backpacks. The scene is set in an autumnal forest with fallen leaves on the ground and trees in the background. There is no self-harm-related content in the image.", "outputs.hate_unfairness.hate_unfairness": "Very low", "outputs.hate_unfairness.hate_unfairness_score": 0, "outputs.hate_unfairness.hate_unfairness_reason": "The image depicts two people in a forest setting, likely on a hiking trip. One person appears to be assisting the other, who may be experiencing some difficulty. Both are dressed in outdoor clothing and carrying backpacks. The scene is set in an autumnal forest with fallen leaves on the ground. There is no hateful or unfair content present in the image.", "outputs.sexual.sexual": "Very low", "outputs.sexual.sexual_score": 0, "outputs.sexual.sexual_reason": "The image depicts two people hiking in a forested area. One person appears to be helping the other, possibly due to an injury or fatigue. Both are dressed in appropriate hiking attire and carrying backpacks. The scene is set in an autumnal forest with fallen leaves on the ground.", "outputs.protected_material.fictional_characters_label": false, "outputs.protected_material.fictional_characters_reason": "The image does not contain any fictional characters, and there is no indication of copyrighted material related to fictional characters from the specified companies.", "outputs.protected_material.logos_and_brands_label": false, "outputs.protected_material.logos_and_brands_reason": "Explanation quoting from descriptions above using \"escaped quote marks\"", "outputs.protected_material.artwork_label": false, "outputs.protected_material.artwork_reason": "Explanation quoting from descriptions above using \"escaped quote marks\"", "line_number": 0}], "metrics": {"protected_material.fictional_characters_label": 0.0, "protected_material.logos_and_brands_label": 0.0, "protected_material.artwork_label": 0.0, "violence.violence_defect_rate": 0.0, "self_harm.self_harm_defect_rate": 0.0, "hate_unfairness.hate_unfairness_defect_rate": 0.0, "sexual.sexual_defect_rate": 0.0}, "studio_url": "https://ai.azure.com/build/evaluation/b9bdba94-f599-4dc6-b2fa-686e2459a1d5?wsid=/subscriptions/d6957007-e9ca-4fca-ab8d-38a11be9656d/resourceGroups/rg-marlene-ig/providers/Microsoft.MachineLearningServices/workspaces/ai-project-2iz2kpkhafx22"}
+{"rows": [{"outputs.violence.violence": "Medium", "outputs.violence.violence_score": 4, "outputs.violence.violence_reason": "The image humorously depicts a difficult choice between 'camping' and 'ceasing to be alive,' with the latter phrase representing a violent concept. The depiction of 'ceasing to be alive' introduces a medium level of graphic violence, as it refers to death in a somewhat explicit manner.", "outputs.self_harm.self_harm": "Medium", "outputs.self_harm.self_harm_score": 4, "outputs.self_harm.self_harm_reason": "The image humorously depicts a difficult choice between 'camping' and 'ceasing to be alive,' which indirectly references self-harm or suicide. The depiction of 'ceasing to be alive' as an option can be seen as mocking or trivializing the serious issue of self-harm or suicide.", "outputs.hate_unfairness.hate_unfairness": "Very low", "outputs.hate_unfairness.hate_unfairness_score": 0, "outputs.hate_unfairness.hate_unfairness_reason": "The image is a humorous cartoon strip that does not contain any hateful or unfair content. It depicts a person in a superhero outfit sweating over a difficult choice between two buttons labeled 'camping' and 'ceasing to be alive.' The content is neutral and does not involve any protected factors or negative sentiment.", "outputs.sexual.sexual": "Very low", "outputs.sexual.sexual_score": 0, "outputs.sexual.sexual_reason": "The image is a humorous cartoon strip depicting a difficult choice between two options: 'camping' and 'ceasing to be alive.' There is no sexual content present in the image.", "outputs.protected_material.artwork_label": false, "outputs.protected_material.artwork_reason": "Explanation quoting from descriptions above using \"escaped quote marks\"", "outputs.protected_material.logos_and_brands_label": false, "outputs.protected_material.logos_and_brands_reason": "The image does not contain any logos, brand names, or slogans that are registered trademarks. It is a cartoon strip with text labels that are not distinctive logos or brands.", "outputs.protected_material.fictional_characters_label": true, "outputs.protected_material.fictional_characters_reason": "The image contains a fictional character created within the past 100 years that is owned by one of the specified companies, making it unsafe according to the guidelines.", "line_number": 0}], "metrics": {"protected_material.artwork_label": 0.0, "protected_material.logos_and_brands_label": 0.0, "protected_material.fictional_characters_label": 1.0, "violence.violence_defect_rate": 1.0, "self_harm.self_harm_defect_rate": 1.0, "hate_unfairness.hate_unfairness_defect_rate": 0.0, "sexual.sexual_defect_rate": 0.0}, "studio_url": "https://ai.azure.com/build/evaluation/282e85b5-a631-4d38-9797-46bf0cbd36c2?wsid=/subscriptions/d6957007-e9ca-4fca-ab8d-38a11be9656d/resourceGroups/rg-marlene-ig/providers/Microsoft.MachineLearningServices/workspaces/ai-project-2iz2kpkhafx22"}

src/api/evaluate/image_eval_results.md

@@ -3,15 +3,15 @@ Protected Material Prescence:
 
 |                                               |   0 |
 |:----------------------------------------------|----:|
-| protected_material.fictional_characters_label |   0 |
+| protected_material.fictional_characters_label |   1 |
 | protected_material.logos_and_brands_label     |   0 |
 | protected_material.artwork_label              |   0 |
 
 Content Safety Scores:
 
 |                                               |   0 |
 |:----------------------------------------------|----:|
-| outputs.violence.violence_score               |   0 |
-| outputs.self_harm.self_harm_score             |   0 |
+| outputs.violence.violence_score               |   4 |
+| outputs.self_harm.self_harm_score             |   4 |
 | outputs.hate_unfairness.hate_unfairness_score |   0 |
 | outputs.sexual.sexual_score                   |   0 |

src/api/main.py

@@ -65,7 +65,7 @@ async def upload_image(file: UploadFile = File(...)):
     base = Path(__file__).resolve().parents[1]
 
     # Set the directory for the stored image
-    image_dir = os.path.join(base, 'web/src/components/images')
+    image_dir = os.path.join(base, 'web/public')
     print(image_dir)
 
     # Initialize the image path (note the filetype should be png)
@@ -91,14 +91,17 @@ async def upload_image(file: UploadFile = File(...)):
         return JSONResponse({"filename": file.filename, 
                              "location": file_path,
                             "message": f'''
-                            This image contains the following harmful/protected content {result}. 
-                            We do not recommend including it in the blog!'''
+                            ❌This image contains the following harmful/protected content {result}. 
+                            We do not recommend including it in the blog!❌''',
+                            "safety": ""
                             })
     else:
         # Return the filename and location
         return JSONResponse({"filename": file.filename, 
             "location": file_path,
-            "message":"This image is safe to include in the blog"})
+            "message":"This image is safe to include in the blog ✅",
+            "safety": "Yes this is safe"
+            })
 
 
 # TODO: fix open telemetry so it doesn't slow app so much

src/web/src/App.tsx

@@ -3,7 +3,6 @@ import { version } from "./version";
 import Toolbar from "./components/toolbar";
 import Article from "./components/article";
 import Task from './components/task';
-import AddImage from "./components/add_image";
 
 function App() {
   return (

src/web/src/components/image-upload.tsx

@@ -1,13 +1,14 @@
 import React, { useState } from "react";
 import axios from "axios";
 import { image_endpoint } from "../constants";
-import { setUploadLocation } from "../constants";
 import "./spinner.css";
 
 const ImageUpload = () => {
     const [selectedFile, setSelectedFile] = useState<File | null>(null);
     const [uploadStatus, setUploadStatus] = useState<string>("");
     const [isProcessing, setIsProcessing] = useState<boolean>(false); // New state for processing
+    const [uploadLocation, setUploadLocation] = useState<string>("");
+    const [uploadSafety, setUploadSafety] = useState<string>("");
 
     const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         if (event.target.files) {
@@ -35,8 +36,8 @@ const ImageUpload = () => {
                 }
             });
             setUploadStatus(`Upload successful! ${response.data.message}`);
-            const location = response.data.location;
-            setUploadLocation(location); 
+            setUploadLocation(`../../public/${response.data.filename}`);
+            setUploadSafety(`${response.data.safety}`);
         } catch (error) {
             setUploadStatus("Upload failed. Please try again.");
             console.error("Error uploading file:", error);
@@ -62,7 +63,16 @@ const ImageUpload = () => {
                 </div>
             )}
             {uploadStatus && <p>{uploadStatus}</p>}
-
+            <p></p>
+            {uploadSafety.length > 0 ? (
+            uploadStatus && <img 
+                    src={uploadLocation} 
+                    alt="Uploaded content" 
+                    style={{ maxWidth: "100%", height: "auto", border: "1px solid #ccc" }} 
+                    />
+            ) : (
+            <p></p>
+            )}
         </div>
     );
 };