Spaces:

AI4MIRO
/

parrot.ai

Running

App Files Files Community

Margerie commited on Jan 8, 2024

Commit

83098c2

1 Parent(s): 96471b1

first commit

Browse files

Files changed (20) hide show

ai_models.html +71 -0
contact.html +82 -0
documentation.html +110 -0
img/contour_matching.png +0 -0
img/index/code.png +0 -0
img/index/comparison.png +0 -0
img/index/ct-scan.png +0 -0
img/index/dicom.PNG +0 -0
img/index/edit.png +0 -0
img/index/evaluation.png +0 -0
img/index/innovation.png +0 -0
img/index/parrot-logo.png +0 -0
img/index/personal-data.png +0 -0
img/index/research-and-development.png +0 -0
img/python_code_editor.png +0 -0
img/screen_ai_models_management.png +0 -0
img/screen_patient_modeling.png +0 -0
img/screen_plan_evaluation.png +0 -0
img/screen_study_management.png +0 -0
index.html +158 -17

ai_models.html ADDED Viewed

	@@ -0,0 +1,71 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>PARROT - Documentation</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+</head>
+<body>
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
+    <a class="navbar-brand" href="#">PARROT</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
+            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav">
+            <li class="nav-item">
+                <a class="nav-link" href="index.html">Home</a>
+            </li>
+            <li class="nav-item active">
+                <a class="nav-link" href="#">Documentation</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="ai_models.html">AI models</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="contact.html">Contact</a>
+            </li>
+        </ul>
+    </div>
+</nav>
+<div class="container mt-5">
+    <div class="row">
+        <div class="col-lg-8">
+            <h1 class="mb-4 mt-4">AI models</h1>
+            <section id="segmentation-models">
+                <h2>Segmentation models</h2>
+            </section>
+            <section id="dose-prediction">
+                <h2>Dose prediction</h2>
+            </section>
+            <section id="add-your-models">
+                <h2>Add your models</h2>
+            </section>
+        </div>
+        <div class="col-lg-4">
+            <nav id="right-menu" class="navbar navbar-light bg-light">
+                <nav class="nav flex-column">
+                    <a class="nav-link" href="#segmentation-models">Segmentation models</a>
+                    <a class="nav-link" href="#dose-prediction">Dose prediction</a>
+                    <a class="nav-link" href="#add-your-models">Add your models</a>
+                </nav>
+            </nav>
+        </div>
+    </div>
+</div>
+<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+</body>
+</html>

contact.html ADDED Viewed

	@@ -0,0 +1,82 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>PARROT - Contact</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+</head>
+<body>
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
+    <a class="navbar-brand" href="#">PARROT</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
+            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav">
+            <li class="nav-item">
+                <a class="nav-link" href="index.html">Home</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="documentation.html">Documentation</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="ai_models.html">AI models</a>
+            </li>
+            <li class="nav-item active">
+                <a class="nav-link" href="#">Contact</a>
+            </li>
+        </ul>
+    </div>
+</nav>
+<div class="container mt-5">
+    <div class="row">
+        <div class="col-lg-8">
+            <h1>Contact Us</h1>
+            <p>If you have any questions or want to share information about your AI model, please use the form below.</p>
+            <form action="#" method="post">
+                <div class="form-group">
+                    <label for="name">Your Name</label>
+                    <input type="text" class="form-control" id="name" name="name" required>
+                </div>
+                <div class="form-group">
+                    <label for="email">Your Email</label>
+                    <input type="email" class="form-control" id="email" name="email" required>
+                </div>
+                <div class="form-group">
+                    <label for="inputDescription">Describe Your AI Model</label>
+                    <textarea class="form-control" id="inputDescription" name="description" rows="5" required></textarea>
+                </div>
+                <div class="form-group">
+                    <label for="inputInput">Input Details</label>
+                    <input type="text" class="form-control" id="inputInput" name="input" required>
+                </div>
+                <div class="form-group">
+                    <label for="outputOutput">Output Details</label>
+                    <input type="text" class="form-control" id="outputOutput" name="output" required>
+                </div>
+                <div class="form-group">
+                    <label for="trainingSetSize">Training Set Size</label>
+                    <input type="text" class="form-control" id="trainingSetSize" name="trainingSetSize" required>
+                </div>
+                <div class="form-group">
+                    <label for="numberOfEpochs">Number of Epochs</label>
+                    <input type="text" class="form-control" id="numberOfEpochs" name="numberOfEpochs" required>
+                </div>
+                <button type="submit" class="btn btn-primary">Submit</button>
+            </form>
+        </div>
+    </div>
+</div>
+<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+</body>
+</html>

documentation.html ADDED Viewed

	@@ -0,0 +1,110 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>PARROT - Documentation</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+</head>
+<body>
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
+    <a class="navbar-brand" href="#">PARROT</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
+            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav">
+            <li class="nav-item">
+                <a class="nav-link" href="index.html">Home</a>
+            </li>
+            <li class="nav-item active">
+                <a class="nav-link" href="#">Documentation</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="ai_models.html">AI models</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="contact.html">Contact</a>
+            </li>
+        </ul>
+    </div>
+</nav>
+<div class="container mt-5">
+    <div class="row">
+        <div class="col-lg-8">
+            <h1 class="mb-4 mt-4">Documentation</h1>
+            <section id="installation">
+                <h2>Installation</h2>
+                <p>Instructions for installing PARROT on your system... Warning: The Orthanc server will run on port 8042 of your local computer and the nginx server on port 2000.</p>
+                <p>The installation package includes all servers. However, the Orthanc server is a manual installation. The installation instructions can be found below.</p>
+            </section>
+            <section id="study-management">
+                <h2>Study Management</h2>
+                <p>Users can import patient data from this screen to a local Orthanc daemon—a lightweight, standalone DICOM server, which ensures the confidentiality of patient files. A list of patient data present in the Orthanc server is displayed with summarized information. Users can load the data into the app by clicking on the Load button. The left icon displays more complete information from DICOM tags and users can delete a patient study from the server with the red arrow on the right.</p>
+                <figure>
+                <img src="img/screen_study_management.png" alt="Study Management Image" class="img-fluid mb-3">
+                <figcaption>Figure ?: Study Management screen.</figcaption>
+                </figure>
+            </section>
+            <section id="ai-models-management">
+                <h2>AI Models Management</h2>
+                <figure>
+                <img src="img/screen_ai_models_management.png" alt="AI Models Management Image" class="img-fluid mb-3">
+                <figcaption>Figure ?: AI Models Management screen.</figcaption>
+                </figure>
+                <p>Eight segmentation models and six dose prediction models are made available and listed on the screen (Figure 2). These models are trained from state-of-the-art architectures such as nnUNet, SwinUNETR and HDUNet (Table 1). On the left hand side of each line, a standardized description of the model is available. The PDF description file contains details about the architecture with a link of the original research article, details on the training process including dataset, and performance on our test set (Figure 3). Users also have the flexibility to run their own models using a Python scripting editor and display the output in the viewer (Figure 4). We distinguish two categories of models: the segmentation models and the dose prediction models. A key difference between the two categories is that segmentation models require only the anatomy of the patient (CT scan or MRI image) whereas dose prediction models also require binary masks of tumor volumes (TV) and organs at risk (OARs). For that latter, we implemented a dialog that allows users to map structures present in the current patient data and the input required for the AI dose prediction model (Figure 5).</p>
+                <iframe width="560" height="315" src="https://www.youtube.com/embed/example_video_code" frameborder="0" allowfullscreen class="mb-4"></iframe>
+            </section>
+            <section id="patient-modeling">
+                <h2>Patient Modeling</h2>
+                <figure>
+                <img src="img/screen_patient_modeling.png" alt="Patient Modeling Image" class="img-fluid mb-3">
+                <figcaption>Figure ?: Patient Modeling screen.</figcaption>
+                </figure>
+                <p>Eight segmentation models and six dose prediction models are made available and listed on the screen (Figure 3). These models are trained from state-of-the-art architectures such as nnUNet [2], SwinUNETR [3] and HDUNet [4] (Table 1). On the left hand side of each line, a standardized description of the model is available. The PDF description file contains details about the architecture with a link of the original research article, details on the training process including dataset, and performance on our test set (Figure 4).
+                    To run a model prediction, the user simply clicks on the yellow Prediction button on the right hand side of the model line. This will open a Python scripting editor to run the code (Figure 5). Two choices are available to the user: either run the code locally or in one of the Python environments provided. The latter option provides a Python version with a set of libraries. Users can select a Python environment with the drop-down menu in the upper right corner and by hovering on it, a description of the libraries they contain is displayed. Once the prediction is done, users can upload the result to the study to visualize the output in the Patient Modeling screen (Figure 7). Users also have the flexibility to run their own models by loading their own code in the Python scripting editor. On our website, we provide a description and examples using the API to retrieve the patient information loaded on PARROT and upload the result.
+                    We distinguish two categories of models: the segmentation models and the dose prediction models. A key difference between the two categories is that segmentation models require only the anatomy of the patient (CT scan or MRI image) whereas dose prediction models also require binary masks of tumor volumes (TV) and organs at risk (OARs). For that latter, we implemented a dialog that allows users to map structures present in the current patient data and the input required for the AI dose prediction model (Figure 6).
+                    </p>
+            </section>
+            <section id="plan-evaluation">
+                <h2>Plan Evaluation</h2>
+                <figure>
+                <img src="img/screen_plan_evaluation.png" alt="Plan Evaluation Image" class="img-fluid mb-3">
+                <figcaption>Figure ?: Plan Evaluation screen.</figcaption>
+                </figure>
+                <p>A comprehensive display of two dose distributions comparison is presented on the last screen. The two dose distributions can originate from the importation step or result from the inference of ai models. We provide a set of tools for comparison, such as DVH curves, dose statistics, and the fulfillment of clinical goals. Clinical goals can be uploaded following an Excel template so that it fits any clinical requirements of the users institutions. The platform incorporates treatment indications based on NTCP protocols. It has been shown in multiple studies that predicted dose distributions yield meaningful output when used with NTCP models for treatment selection decision support [5] [6]. This is a useful decision support tool for the clinical community.
+                </p>
+            </section>
+        </div>
+        <div class="col-lg-4">
+            <nav id="right-menu" class="navbar navbar-light bg-light">
+                <nav class="nav flex-column">
+                    <a class="nav-link" href="#installation">Installation</a>
+                    <a class="nav-link" href="#study-management">Study Management</a>
+                    <a class="nav-link" href="#ai-models-management">AI Models Management</a>
+                    <a class="nav-link" href="#patient-modeling">Patient Modeling</a>
+                    <a class="nav-link" href="#plan-evaluation">Plan Evaluation</a>
+                </nav>
+            </nav>
+        </div>
+    </div>
+</div>
+<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+</body>
+</html>

img/contour_matching.png ADDED Viewed

img/index/code.png ADDED Viewed

img/index/comparison.png ADDED Viewed

img/index/ct-scan.png ADDED Viewed

img/index/dicom.PNG ADDED Viewed

img/index/edit.png ADDED Viewed

img/index/evaluation.png ADDED Viewed

img/index/innovation.png ADDED Viewed

img/index/parrot-logo.png ADDED Viewed

img/index/personal-data.png ADDED Viewed

img/index/research-and-development.png ADDED Viewed

img/python_code_editor.png ADDED Viewed

img/screen_ai_models_management.png ADDED Viewed

img/screen_patient_modeling.png ADDED Viewed

img/screen_plan_evaluation.png ADDED Viewed

img/screen_study_management.png ADDED Viewed

index.html CHANGED Viewed

@@ -1,19 +1,160 @@
 <!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

 <!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>PARROT - Platform for AI-guided Radiation Oncology Treatment</title>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <style>
+        body {
+            padding-top: 56px;
+        }
+    </style>
+</head>
+<body>
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
+    <a class="navbar-brand" href="#">PARROT</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
+            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav">
+            <li class="nav-item active">
+                <a class="nav-link" href="#">Home</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="documentation.html">Documentation</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="ai_models.html">AI models</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="contact.html">Contact</a>
+            </li>
+        </ul>
+    </div>
+</nav>
+<div class="container mt-5">
+    <div class="row">
+        <div class="col-lg-8">
+            <h1>Welcome to PARROT</h1>
+            <p>
+                PARROT, which stands for Platform for ARtificial intelligence guided Radiation Oncology Treatment,
+                is a user-friendly, free, and open-source web platform. It allows users to visualize DICOM files, run AI models,
+                display and evaluate predictions easily. The platform includes several trained state-of-the-art dose prediction
+                and contour segmentation models. Users can also add their own models using the embedded code editor.
+            </p>
+            <p>
+                The app consists of a frontend built in React JavaScript, including the graphical interface with a DICOM viewer,
+                a selection panel of AI models, an editor of contours predictions, and evaluation tools. The backend is built with Flask
+                to handle the predictions of AI models.
+            </p>
+        </div>
+        <div class="col">
+            <img src="img/index/parrot-logo.png" alt="PARROT Logo" class="index/parrot-logo img-fluid">
+        </div>
+    </div>
+    <div class="col-lg text-center">
+        <button id="downloadButton" class="btn btn-primary">Download Latest Release</button>
+    </div>
+</div>
+<div class="container mt-5">
+    <div class="row">
+        <div class="col text-center mb-5">
+            <h2>
+                PARROT allows you to:
+            </h2>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-3 text-center">
+            <img src="img/index/research-and-development.png" alt="State-of-the-art models" class="img-fluid w-50 mb-3">
+            <p>Run state-of-the-art AI models</p>
+        </div>
+        <div class="col-lg-3 text-center">
+            <img src="img/index/ct-scan.png" alt="ct scan" class="img-fluid w-50 mb-3">
+            <p>Visualize contours segmented with AI on CT and MR images</p>
+        </div>
+        <div class="col-lg-3 text-center">
+            <img src="img/index/comparison.png" alt="ct scan" class="img-fluid w-50 mb-3">
+            <p>Compare uploaded and/or predicted dose distributions</p>
+        </div>
+        <div class="col-lg-3 text-center">
+            <img src="img/index/edit.png" alt="ct scan" class="img-fluid w-50 mb-3">
+            <p>Correct contours predicted by AI model</p>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-3 text-center">
+            <img src="img/index/dicom.PNG" alt="ct scan" class="img-fluid w-50 mb-3">
+            <p>Full DICOM to DICOM workflow</p>
+        </div>
+        <div class="col-lg-3 text-center">
+            <img src="img/index/personal-data.png" alt="ct scan" class="img-fluid w-50 mb-3">
+            <p>Local web application to ensure patient data privacy</p>
+        </div>
+        <div class="col-lg-3 text-center">
+            <img src="img/index/innovation.png" alt="ct scan" class="img-fluid w-50 mb-3">
+            <p>Run your own AI models</p>
+        </div>
+        <div class="col-lg-3 text-center">
+            <img src="img/index/evaluation.png" alt="ct scan" class="img-fluid w-50 mb-3">
+            <p>Clinical evaluation tools: NTCP, DVH curves, clinical objectives, dose statistics</p>
+        </div>
+    </div>
+</div>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+<script>
+    $(document).ready(function () {
+        // Replace 'YOUR_PROJECT_ID' and 'YOUR_REPO_NAME' with your GitLab project ID and repository name
+        var projectId = '25472370';
+        var repoName = 'charp-viewer';
+        // https://gitlab.com/zhaosadre/charp-viewer/-/releases -->
+        // GitLab API endpoint for releases
+        var apiUrl = 'https://gitlab.com/api/v4/projects/'+projectId+'/releases/'//+tag_name+'/assets/links'
+        //var apiUrl = 'https://gitlab.com/api/v4/projects/' + projectId + '/repository/tags'; -->
+        // Fetch the latest release information
+        $.ajax({
+            url: apiUrl,
+            method: 'GET',
+            success: function (data) {
+                console.log("data",data);
+                if (data.length > 0) {
+                    var latestRelease = data[0];
+                    console.log("latestRelease",latestRelease);
+                    var releaseAssets = latestRelease.assets;
+                    console.log("releaseAssets",releaseAssets);
+                    // Assuming the first asset is the desired download (e.g., a zip file)
+                    var downloadUrl = releaseAssets.sources.length > 0 ? releaseAssets.sources[0].url : '';
+                    // Update the download button href attribute
+                    $('#downloadButton').attr('onclick', 'window.location.href="' + downloadUrl + '"');
+                }
+            },
+            error: function (error) {
+                console.error('Error fetching release information:', error);
+            }
+        });
+    });
+</script>
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+</body>
 </html>