🐛 Keep the out panel always visible

src/backend/main.py

@@ -1,6 +1,6 @@
 import json
 from io import BytesIO
-from typing import Annotated
+from typing import Annotated, Union
 
 import requests
 from dotenv import dotenv_values, find_dotenv
@@ -92,11 +92,13 @@ async def components(module: str = "datastamp", encode: bool = False):
 
 @app.post("/process")
 async def process_image(
-    image: Annotated[UploadFile, Form()], data: Annotated[str, Form()]
+    data: Annotated[str, Form()] = None,
+    image: Annotated[Union[None, UploadFile], Form()] = None,
 ):
     """Process the image with the defined options"""
     data = json.loads(data)
-    img_bytes = BytesIO(await image.read())
+    if image is not None:
+        img_bytes = BytesIO(await image.read())
     # PIL.Image.open(img_bytes) to open as pillow image
 
     match data["module"]:
@@ -109,8 +111,8 @@ async def process_image(
         case "steg":
             pass
 
-    return Response(img_bytes.read(), media_type="image/png")
     return "Text example"
+    return Response(img_bytes.read(), media_type="image/png")
 
 
 # Make sure this is always at the bottom

src/frontend/app.html

@@ -39,7 +39,7 @@ <h1 class="team_name">Emerging Exceptions</h1>
             </nav>
 
             <div class="panels">
-                <div class="input_panel">
+                <div class="input_panel" id="input_panel">
                     <div class="image" id="image">
                         <div class="upload" id="upload">
                             <svg xmlns="http://www.w3.org/2000/svg" width="99" height="87" viewBox="0 0 99 87" fill="none">

src/frontend/app.js

@@ -102,16 +102,17 @@ for (let i = 0; i < nav_items.length; i++) {
 //     get_inputs()
 // })
 
+
 steg_btn.addEventListener("click", e => {
     // Only needs input
-    output_panel.hidden = false
+    input_panel.hidden = false
     module = "steg"
     get_inputs()
 })
 
 datastamp_btn.addEventListener("click", e => {
     // Only needs input
-    output_panel.hidden = true
+    input_panel.hidden = true
     module = "datastamp"
     get_inputs()
 })
@@ -184,7 +185,7 @@ const submit_btn = document.getElementById("submit")
 
 submit_btn.addEventListener("click", e => {
     let data = new FormData()
-    data.append("image", file)
+    if (file != null) {data.append("image", file)}
     data.append("data", JSON.stringify({
         "module": module,
         "is_encode": encode,