[ENH] UI development #56 (#60)

* added fastapi and uvicorn to requirements * added api entrypoint * restructured main function * no response model to make tests pass * added age test * comment diagnosis test * comment diagnosis test * added test api * deleted old main script * update * update * added curl + expose port * add start of uvicorn * update * removed path * update * changed path * add abb lists * removed debug statement * added images for readme * added image * removed error statement * added description and drop down for parameters * added images * update readme * restructured * added python-multipart * changed api adress * added usage instructions * changed port of deployment * changed docker command * added note (output file par) * update links * added model pull * initial commit ui-setup * enabled CORS for react * more verbose setup * exchanged fetch for axios; added instructions * fixed api flaws * added ui installation * added ui images * add ui screenshots * changed port for VM * add gpu setup to docs * axios * updates * including diagnosis to the ui * finishing up ui * uncommenting * uncommenting * Update ui-integration/src/App.js Co-authored-by: barbarastrasser <[email protected]> * Update ui-integration/src/App.js Co-authored-by: barbarastrasser <[email protected]> * Update ui-integration/src/App.js Co-authored-by: barbarastrasser <[email protected]> * updates * updating to remove the CORS issue that came up when editing the code while resolving merge conflicts with the main * updating port * webpack * dockerfile for ui --------- Co-authored-by: Barbara Strasser-Kirchweger <[email protected]> Co-authored-by: barbarastrasser <[email protected]>
neurobagel · Aug 25, 2024 · 865e4a2 · 865e4a2
1 parent 152d70b
commit 865e4a2
Show file tree

Hide file tree

Showing 30 changed files with 18,964 additions and 5 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -15,8 +15,10 @@ COPY ./entrypoint.sh ./
 EXPOSE 9000
 
 # Define environment variable
+
 ENV PORT=9000
 
+
 # Make the entrypoint script executable
 RUN chmod +x ./entrypoint.sh
 RUN apt-get update && apt-get install -y curl

diff --git a/Readme.md b/Readme.md
@@ -93,6 +93,8 @@ Let't break down the commands:
 - `-p 9000:9000`: Mount port for API requests inside the container
 - `annotation-tool-ai`: Name of the image we create the instance of.
 
+
+
 **NOTE**
 
 If you want to access the API only from outside the container (which might be usually the case) it is not necessary to mount a directory when running the container. However, it has been kept in the command since it might be useful for debugging purposes.
@@ -187,6 +189,8 @@ If you chose the local deployment or you want to access the container from outsi
 ```
 curl -X POST "http://127.0.0.1:9000/process/?code_system=<snomed | cogatlas>&response_type=<file | json>" 
 -F "file=@<filepath-to-tsv-outside-container>.tsv" 
+ This is the command you want to execute in the interactive terminal session within the container. The input file is the to-be-annotated `.tsv` file and the output file is the `.json` file.
+
 -o <filepath-to-output-file-outside-container>.json
 ```
 
@@ -197,11 +201,14 @@ Let's break down this again (for local/outside docker deployment ignore the firs
 - `api_test`: Name of the instance. 
 - `curl -X POST "http://127.0.0.1:9000/process/?code_system=<snomed | cogatlas>" -F "file=@<filepath-to-tsv-inside/outside-container>.tsv" -o <filepath-to-output-file-inside/outside-container>.json`: This is the command that makes a POST request to the API. The input file is the to-be-annotated `.tsv` file and the output file is the `.json` file.
 
+
 ---
 **NOTE**
 
+
 The `-o <filepath-to-output-file-inside/outside-container>.json` is only necessary if `file` is chosen as `response_type` parameter.
 
+
 ---
 
 # Details of the codebase 

diff --git a/app/api.py b/app/api.py
@@ -5,9 +5,14 @@
 from fastapi import FastAPI, HTTPException, Query, UploadFile, File
 from fastapi.responses import FileResponse, JSONResponse
 import os
+from fastapi.middleware.cors import CORSMiddleware
+
 
 from processing import process_file
 
+
+
+
 app = FastAPI(
     title="Data Annotation, But Make It Effortless with LLM Magic",
     description="""
@@ -24,6 +29,19 @@
 )
 
 
+
+app.add_middleware(
+
+    CORSMiddleware,
+
+    allow_origins=[
+        "*"
+    ],  # --> Change this to the domain of the frontend in production
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
 @app.post("/process/", response_model=None)  # type: ignore
 async def process_files(
     file: UploadFile = File(...),
@@ -81,7 +99,10 @@ async def process_files(
         help="Host to run the server on",
     )
     parser.add_argument(
+
+
         "--port", type=int, default=9000, help="Port to run the server on"
+
     )
 
     args = parser.parse_args()

diff --git a/app/categorization/llm_categorization.py b/app/categorization/llm_categorization.py
@@ -98,4 +98,4 @@ def llm_invocation(
     else:
         output = llm_diagnosis_assessment(key, value, code_system)
 
-    return output
+    return output
diff --git a/app/categorization/llm_helper.py b/app/categorization/llm_helper.py
@@ -249,4 +249,4 @@ def get_label_for_abbreviation(
     data = load_dictionary(file_path)
     result = get_label_for_abbreviation(key, data)
     print(result)
-    return result
+    return result
diff --git a/app/categorization/promptTemplate.py b/app/categorization/promptTemplate.py
@@ -112,4 +112,4 @@
     the provided name of the most frequently used assessment tool.
     """,
     input_variables=["possible_tool_terms"],
-)
+)
diff --git a/app/parsing/json_parsing.py b/app/parsing/json_parsing.py
@@ -350,4 +350,4 @@ def update_json_file(
         file_data = {}
     file_data[target_key] = data_dict
     with open(filename, "w") as file:
-        json.dump(file_data, file, indent=2)
+        json.dump(file_data, file, indent=2)
diff --git a/app/processing.py b/app/processing.py
@@ -20,11 +20,16 @@ def process_file(
         try:
             input_dict = {key: value}
             llm_response = llm_invocation(input_dict, code_system)
+
+
             print(llm_response)
+
             result = process_parsed_output(llm_response, code_system)  # type: ignore # noqa: E501
             results[key] = result
             update_json_file(result, json_file, key)
         except Exception as e:
             results[key] = {"error": str(e)}
+
 
+
     return results
diff --git a/tests/test_json_parsing.py b/tests/test_json_parsing.py
@@ -255,6 +255,7 @@ def test_diagnosis_variable(
     assert result == expected_result
 
 
+
 def test_session_id(levels_mapping_fixture: Dict[str, Dict[str, str]]) -> None:
     parsed_output: Dict[str, Union[str, Dict[str, str], None]] = {
         "TermURL": "nb:Session"

diff --git a/tests/test_llm_categorization.py b/tests/test_llm_categorization.py
@@ -118,6 +118,7 @@ def test_llm_invocation_age(mock_llm_response: Any) -> None:
             assert output == expected_output
 
 
+
 def test_llm_invocation_diagnosis(mock_llm_response: Any) -> None:
     key = "diagnosis"
     value = "diagnosis PD PD HC HC PD"

diff --git a/tests/test_processing_api.py b/tests/test_processing_api.py
@@ -568,6 +568,7 @@ def test_process_files_assessment_snomed(mock_llm_response: Any) -> None:
 }
 
 
+
 def test_process_files_diagnosis(mock_llm_response: Any) -> None:
     with patch(
         "categorization.promptTemplate.PromptTemplate"
@@ -637,4 +638,4 @@ def test_process_files_diagnosis(mock_llm_response: Any) -> None:
 
             # Clean up the temporary files
             os.remove(file_path)
-            os.remove(response_file_path)
+            os.remove(response_file_path)
diff --git a/ui-integration/.gitignore b/ui-integration/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/ui-integration/Dockerfile b/ui-integration/Dockerfile
@@ -0,0 +1,29 @@
+# Use an official Node.js runtime as a parent image
+FROM node:16-alpine as build
+
+# Set working directory
+WORKDIR /app
+
+# Copy package.json and package-lock.json to the container
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application code
+COPY . .
+
+# Build the app
+RUN npm run build
+
+# Stage 2 - Production Image
+FROM nginx:alpine
+
+# Copy the built app to the Nginx server
+COPY --from=build /app/build /usr/share/nginx/html
+
+# Expose the port on which the app will run
+EXPOSE 80
+
+# Start Nginx server
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/ui-integration/README.md b/ui-integration/README.md
@@ -0,0 +1,70 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+
+If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+
+You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)