overhaul gui

src/api/demask.py

@@ -0,0 +1,16 @@
+import fastapi
+from fastapi.responses import JSONResponse
+from fastapi import Request
+from pydantic import BaseModel
+from src.utils.replacer import revert_replacements
+
+router = fastapi.APIRouter()
+
+class MaskRequest(BaseModel):
+    text: str
+    entities: dict
+
+@router.post("/demask", response_class=JSONResponse, include_in_schema=True)
+async def mask(request: MaskRequest):
+    deanontext = revert_replacements(request.text, request.entities)
+    return {"deanonymized_text": deanontext}

src/app.py

@@ -1,19 +1,27 @@
 from fastapi import FastAPI
 from fastapi.staticfiles import StaticFiles
 
-from src.gui import landing 
+from src.gui import gui_landing, gui_mask, gui_demaks
 from src.api import health
 from src.api import mask
+from src.api import demask
 
 app = FastAPI()
 
 # mount static files as directory
 app.mount("/static", StaticFiles(directory="src/static"), name="static")
 
 # include routers
-app.include_router(landing.router)
+## GUI
+app.include_router(gui_landing.router)
+app.include_router(gui_mask.router)
+app.include_router(gui_demaks.router)
+
+## API
 app.include_router(health.router, prefix="/api")
 app.include_router(mask.router, prefix="/api")
+app.include_router(demask.router, prefix="/api")
+
 
 # run the app if this file is executed
 if __name__ == "__main__":

src/gui/gui_demaks.py

@@ -0,0 +1,14 @@
+import fastapi
+from fastapi.responses import HTMLResponse
+from fastapi import Request, routing
+from fastapi.templating import Jinja2Templates
+
+templates = Jinja2Templates(directory="src/templates/html")
+
+router = fastapi.APIRouter()
+
+@router.get("/demask", response_class=HTMLResponse, include_in_schema=False)
+def landing(request: Request): 
+    return templates.TemplateResponse(
+        request=request, name="demask.html", context={"id": id}
+    )

src/gui/landing.py → src/gui/gui_landing.py

@@ -10,5 +10,5 @@
 @router.get("/", response_class=HTMLResponse, include_in_schema=False)
 def landing(request: Request): 
     return templates.TemplateResponse(
-        request=request, name="form.html", context={"id": id}
+        request=request, name="landing.html", context={"id": id}
     )

src/gui/gui_mask.py

@@ -0,0 +1,14 @@
+import fastapi
+from fastapi.responses import HTMLResponse
+from fastapi import Request, routing
+from fastapi.templating import Jinja2Templates
+
+templates = Jinja2Templates(directory="src/templates/html")
+
+router = fastapi.APIRouter()
+
+@router.get("/mask", response_class=HTMLResponse, include_in_schema=False)
+def landing(request: Request): 
+    return templates.TemplateResponse(
+        request=request, name="mask.html", context={"id": id}
+    )

src/static/scripts/demask.js

@@ -0,0 +1,34 @@
+document.getElementById('inputForm').addEventListener('submit', function(event) {
+    event.preventDefault(); // Prevent the default form submission
+
+    const inputData = document.getElementById('inputData').value;
+    const inputDataEntities = JSON.parse(document.getElementById('responseFieldEntities').value);
+
+    // Use a relative URL for the API endpoint
+    const apiEndpoint = '/api/demask'; // Relative URL
+
+    // Send a POST request to the API
+    fetch(apiEndpoint, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ text: inputData, entities: inputDataEntities}), // Send the input text as JSON
+    })
+    .then(response => {
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+        return response.json(); // Parse the JSON response
+    })
+    .then(text => {
+        // Display the response in the textarea
+        document.getElementById('responseFieldText').value = inputData; // Format the JSON response
+        document.getElementById('responseFieldDeanonText').value = text.deanonymized_text; // Format the string response
+    })
+    .catch((error) => {
+        console.error('Error:', error); // Handle any errors
+        // Optionally display the error in the textarea
+        document.getElementById('responseFieldDeanonText').value = 'Error: ' + error.message + '\nEntities: ' + inputDataEntities + '\nText: ' + inputData;
+    });
+});

src/static/scripts/demask_downloader.js

@@ -0,0 +1,18 @@
+document.getElementById('downloadBtnDemask').addEventListener('click', function() {
+    // Get the content of the textarea
+    const Text = document.getElementById('responseFieldDeanonText').value;
+
+    // Create a Blob from the textarea content
+    const blobText = new Blob([Text], { type: 'text/plain' });
+
+    // Create a link element
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(blobText);
+    link.download = 'yoyo-text.txt'; // Specify the file name
+
+    // Programmatically click the link to trigger the download
+    link.click();
+
+    // Clean up and revoke the object URL
+    URL.revokeObjectURL(link.href);
+});

src/static/scripts/fileLoader.js

@@ -0,0 +1,47 @@
+document.getElementById('uploadButton').addEventListener('click', function() {
+    const fileInput = document.getElementById('fileInput');
+    const output = document.getElementById('inputData');
+
+    if (fileInput.files.length === 0) {
+        output.textContent = 'Please select a file to upload.';
+        return;
+    }
+
+    const file = fileInput.files[0];
+    const reader = new FileReader();
+
+    reader.onload = function(e) {
+        const fileContent = e.target.result;
+        output.value = fileContent; // Display the content of the file
+    };
+
+    reader.onerror = function(e) {
+        output.textContent = 'Error reading file: ' + e.target.error;
+    };
+
+    reader.readAsText(file); // Read the file as text
+});
+
+document.getElementById('uploadButtonE').addEventListener('click', function() {
+    const fileInputE = document.getElementById('fileInputE');
+    const output = document.getElementById('responseFieldEntities');
+
+    if (fileInputE.files.length === 0) {
+        output.textContent = 'Please select a file to upload.';
+        return;
+    }
+
+    const fileE = fileInputE.files[0];
+    const reader = new FileReader();
+
+    reader.onload = function(e) {
+        const fileContentE = e.target.result;
+        output.textContent = fileContentE; // Display the content of the file
+    };
+
+    reader.onerror = function(e) {
+        output.textContent = 'Error reading file: ' + e.target.error;
+    };
+
+    reader.readAsText(fileE); // Read the file as text
+});

src/static/styles/colors.css

@@ -1,3 +1,4 @@
 :root {
     --background-body: rgb(240, 238, 238);
+    --background-button: rgb(158, 158, 158);
 }

src/static/styles/style.css

@@ -30,18 +30,48 @@ footer {
     text-align: center;
 }
 
-.center-block {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    text-align: center;
+#inputData {
+    width:340px;
+    height: 100px;
 }
 
-.dlbutton {
-    margin-top: 50px;
+#output {
+    margin-top: 20px;
+    white-space: pre-wrap; /* Preserve whitespace */
 }
 
-#inputData {
-    width:340px;
-    height: 100px;
+.flex-container {
+    display: flex; /* Use flexbox to align items */
+    justify-content: center; /* Center the buttons horizontally */
+    align-items: center; /* Center the buttons vertically */
+    flex-direction: column;
+    gap: 5px; /* Optional: Add space between buttons */
 }
+
+.flex-item {
+    flex: 1;
+    padding: 2px;
+    margin: 0px;
+}
+
+.button-container {
+    display: flex; /* Use flexbox to align items */
+    justify-content: center; /* Center the buttons horizontally */
+    align-items: center; /* Center the buttons vertically */
+    gap: 10px; /* Optional: Add space between buttons */
+}
+
+.square-button {
+    width: 150px;          /* Width of the button */
+    height: 100px;         /* Height of the button (same as width for square) */
+    background-color: var(--background-button); /* Background color */
+    border: none;         /* No border */
+    border-radius: 5px;   /* Slightly rounded corners */
+    cursor: pointer;      /* Pointer cursor on hover */
+    font-size: 16px;      /* Font size */
+}
+
+.square-button:hover {
+    background-color: black; /* Background color */
+    color: white;           /* Text color */
+}

src/templates/html/demask.html

@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>YoYo MaskЯ</title>
+    <link rel="icon" type="image/svg+xml" href="/static/public/favicon.svg">
+    <link rel="stylesheet" href="/static/styles/colors.css">
+    <link rel="stylesheet" href="/static/styles/style.css">
+</head>
+<body>
+    <header>
+        <div>
+            <h1>YoYo MaskЯ</h1>
+            <a href="/">
+                <img class="logo" id="AppLogo" src="/static/public/yo-yo-maskr-logo.svg" alt="YoYo MaskR Logo">
+            </a>
+        </div>
+    </header>
+
+    <main>
+        <div class="flex-container">
+
+            <div class="flex-item">
+                <h3>Input</h3>
+            </div>
+            <div class="flex-item">
+                <form id="inputForm">
+                    <input type="text" id="inputData" placeholder="Enter text to deanonymize or load text from a file" required>
+                    <div class="flex-container">
+                        <div class="flex-item">
+                            <input type="submit" value="Submit">
+                        </div>
+                    </div>  
+                </form>
+            </div>
+
+            <div class="flex-item">
+                <h3>Load from text file</h3>
+            </div>
+            <div class="flex-item">
+                <input type="file" id="fileInput" accept=".txt">
+                <button id="uploadButton">Load</button>
+            </div>
+
+            <div class="flex-item">
+                <h3>Masked Text</h3>
+            </div>
+            <div class="flex-item">
+                <textarea id="responseFieldText" rows="10" cols="50" readonly></textarea>
+            </div>
+
+            <div class="flex-item">
+                <h3>Entities</h3>
+            </div>
+            <div class="flex-item">
+                <textarea id="responseFieldEntities" rows="10" cols="50" readonly></textarea>
+            </div>
+
+            <div class="flex-item">
+                <h3>Load entities from text file</h3>
+            </div>
+            <div class="flex-item">
+                <input type="file" id="fileInputE" accept=".json">
+                <button id="uploadButtonE">Load</button>
+            </div>
+
+            <div class="flex-item">
+                <h3>DeMasked text</h3>
+            </div>
+            <div class="flex-item">
+                <textarea id="responseFieldDeanonText" rows="10" cols="50" readonly></textarea>
+            </div>
+
+            <div class="flex-item">
+                <button id="downloadBtnDemask">Download File</button>
+            </div>
+    </main>
+
+    <footer>
+        <div>
+            <a href="https://github.com/baloise/yo-yo-maskr">
+                <img src="/static/public/github-mark.svg" alt="GitHub" width="30" height="30">
+            </a>
+        </div>
+    </footer>
+
+    <!-- Link to the external JavaScript file -->
+    <script src="/static/scripts/demask.js"></script>
+    <script src="/static/scripts/fileLoader.js"></script>
+    <script src="/static/scripts/demask_downloader.js"></script>
+</body>
+</html>