change style

Author: Bessouat40

back/api/api.py

@@ -7,8 +7,15 @@
 from fastapi.middleware.cors import CORSMiddleware
 from database import Database
 from utils import recognize_data, split_data
+from onnxruntime import InferenceSession
 
-inf = Inference()
+print('setup start...')
+ort_sess = InferenceSession("./models/vit_model.onnx", providers=['CPUExecutionProvider'])
+input_name = ort_sess.get_inputs()[0].name
+output_name = ort_sess.get_outputs()[0].name
+
+inf = Inference(ort_sess=ort_sess, input_name=input_name, output_name=output_name)
+print('setup ok')
 db = Database()
 
 app = FastAPI()
@@ -36,6 +43,20 @@ async def detect_pneumonia(images: List[UploadFile]=File(...)):
     pred = list(inf.predict_image())
     return pred
 
+@app.post('/prediction_multiple_pneumoniaa', response_model=List[int])
+async def detect_pneumonia(images: List[UploadFile]=File(...)):
+    """Pneumonia detection on single or multiple images
+    Args:
+        images (List[UploadFile], optional): List of images as bytes
+    Returns:
+        pred: List corresponding to images diagnostic (0 : no pneumonia, 1 : pneumonia)
+    """
+    images_bytes = []
+    for image in images :
+        images_bytes.append(image.file.read())
+    pred = list(inf.onnx_inferences(images_bytes))
+    return pred
+
 @app.post('/add_data')
 async def add_data(data: Request):
     """Add Data to Postgres Database

back/api/predict.py

@@ -1,14 +1,20 @@
 import joblib
 import numpy as np
-from PIL import Image
 from io import BytesIO
+import onnxruntime
+from PIL import Image
 
 
 class Inference():
 
-    def __init__(self):
-
+    def __init__(self, ort_sess, input_name, output_name):
+        # self.ort_sess = onnxruntime.InferenceSession("./models/vit_model.onnx", providers=['CPUExecutionProvider'])
+        # self.input_name = self.ort_sess.get_inputs()[0].name
+        # self.output_name = self.ort_sess.get_outputs()[0].name
         self.model = joblib.load('./models/random_forest_150x150x1.joblib')
+        self.ort_sess = ort_sess
+        self.input_name = input_name
+        self.output_name = output_name
 
     def load_single_image(self, bytes):
         """Load single image with associated bytes
@@ -44,3 +50,20 @@ def load_multiple_img(self, bytes) :
 
     def predict_image(self):
         return self.model.predict(self.image)
+    
+    def load_onnx_image(self, bytes):
+        decoded = BytesIO(bytes)
+        image = Image.open(decoded).convert("RGB")
+        image = image.resize((224, 224), Image.BILINEAR)
+        img = np.array(image, dtype=np.float32)
+        img /= 255.0
+        img = np.transpose(img, (2, 0, 1))
+        return img
+    
+    def onnx_inferences(self, bytes):
+        inputs = np.array([self.load_onnx_image(path) for path in bytes])
+        outputs = self.ort_sess.run([self.output_name], {self.input_name: inputs})[0]
+        logits = np.array(outputs)
+        probabilities = np.exp(logits) / np.sum(np.exp(logits), axis=1, keepdims=True)
+        predicted_classes = np.argmax(probabilities, axis=1)
+        return predicted_classes

back/requirements.txt

@@ -6,4 +6,5 @@ uvicorn
 fastapi
 psycopg2-binary
 SQLAlchemy
-pandas
+pandas
+onnxruntime

docker-compose.yml

@@ -1,19 +1,18 @@
-version: "3"
+version: '3'
 services:
-
   db:
-      image: postgres
-      restart: unless-stopped
-      container_name: db
-      environment:
-        - POSTGRES_USER=postgres
-        - POSTGRES_PASSWORD=postgres
-        - POSTGRES_DB=medicalDB
-      ports:
-        - '5432:5432'
-      volumes: 
-        - ./db:/var/lib/postgresql/data
-        - ./init.sql:/docker-entrypoint-initdb.d/create_tables.sql
+    image: postgres
+    restart: unless-stopped
+    container_name: db
+    environment:
+      - POSTGRES_USER=postgres
+      - POSTGRES_PASSWORD=postgres
+      - POSTGRES_DB=medicalDB
+    ports:
+      - '5432:5432'
+    volumes:
+      - ./db:/var/lib/postgresql/data
+      - ./init.sql:/docker-entrypoint-initdb.d/create_tables.sql
 
   nginx:
     restart: unless-stopped
@@ -24,19 +23,19 @@ services:
       - backend
       - frontend
     ports:
-    - "3000:80"
+      - '80:80'
 
   frontend:
     platform: linux/amd64
     restart: unless-stopped
-    build: 
+    build:
       context: ./front
       dockerfile: ./Dockerfile
 
-  backend :
+  backend:
     platform: linux/amd64
     restart: unless-stopped
-    build: 
+    mem_limit: 4g
+    build:
       context: ./back
       dockerfile: ./Dockerfile
-    

front/public/background.webp

@@ -1,8 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <style>
+      body {
+        background-image: url('/background2.png');
+        background-size: cover;
+        background-attachment: fixed;
+        background-repeat: no-repeat;
+      }
+    </style>
     <meta charset="utf-8" />
-    <link rel="icon" href="logo.png" />
+    <link rel="icon" href="logo2.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

front/public/background2.png

@@ -11,11 +11,14 @@ const TitleComponent = () => {
     <Stack style={{ height: '100vh', overflow: 'hidden' }}>
       <Stack
         sx={{
+          paddingBottom: '10px',
+          paddingTop: '10px',
+          paddingLeft: '10px',
+          paddingRight: '10px',
           position: 'absolute',
           borderRadius: '10px',
-          border: 15,
-          borderColor: '#FFFFFF',
-          backgroundColor: '#FFFFFF',
+          borderColor: 'rgb(249,249,249,0.8)',
+          backgroundColor: 'rgb(249,249,249,0.8)',
           top: '50%',
           left: '50%',
           transform: 'translate(-50%, -50%)',

front/public/index.html

@@ -119,15 +119,21 @@ const Data = () => {
       <Stack spacing={5} alignItems="center">
         <Stack
           spacing={2}
+          alignItems="center"
           sx={{
             maxHeight: 700,
-            backgroundColor: '#FFFFFF',
+            marginBottom: '10px',
+            paddingTop: '10px',
+            paddingLeft: '10px',
+            paddingRight: '10px',
             borderRadius: '10px',
-            border: 15,
-            borderColor: '#FFFFFF',
+            width: '90%',
+            maxWidth: '1200px',
+            borderColor: 'rgb(249,249,249,0.8)',
+            backgroundColor: 'rgb(249,249,249,0.8)',
           }}
         >
-          <Stack direction="row" spacing={5}>
+          <Stack direction="row" spacing={5} justifyContent="center">
             <SearchBar
               value={searched}
               onChange={(searchVal) => requestSearchFilename(searchVal)}
@@ -140,7 +146,10 @@ const Data = () => {
               onCancelSearch={() => cancelSearchDoctor()}
               placeholder="Filter on a doctor name"
             />
-            <FormControl variant="standard" sx={{ m: 1, minWidth: 120 }}>
+            <FormControl
+              variant="standard"
+              sx={{ minWidth: 120, backgroundColor: 'white' }}
+            >
               <InputLabel id="select-diagnostic">Diagnostic</InputLabel>
               <Select
                 value={filterDiagnostic}
@@ -172,7 +181,9 @@ const Data = () => {
                   {filterRows.map((row, idx) => (
                     <TableRow
                       key={idx}
-                      sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                      sx={{
+                        '&:last-child td, &:last-child th': { border: 0 },
+                      }}
                     >
                       <TableCell align="center" component="th" scope="row">
                         {row.filename}
@@ -188,6 +199,7 @@ const Data = () => {
           ) : (
             <div></div>
           )}
+          <br />
         </Stack>
       </Stack>
     </Stack>

front/public/logo2.png

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react';
-import logo from './images/logo.png';
 import AppBar from '@mui/material/AppBar';
 import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
@@ -46,29 +45,22 @@ const Home = () => {
       <AppBar
         position="relative"
         color="inherit"
-        sx={{ width: '60%', borderRadius: '10px' }}
+        sx={{
+          width: '60%',
+          borderRadius: '10px',
+          backgroundColor: 'rgb(249,249,249,0.8)',
+        }}
       >
         <Stack
           justifyContent="center"
           alignItems="center"
           direction="row"
           spacing={5}
         >
-          <img
-            src={logo}
-            style={{
-              width: 200,
-              height: 200,
-              marginLeft: '1.5rem',
-              position: 'absolut',
-            }}
-            alt="logo"
-          />
           <Typography
             variant="h1"
             style={{
-              background:
-                'linear-gradient(39deg, rgba(210,191,195,1) 0%, rgba(170,70,86,1) 50%, rgba(116,13,16,1) 100%)',
+              background: 'black',
               webkitBackgroundClip: 'text',
               WebkitTextFillColor: 'transparent',
               fontFamily: 'skia',
@@ -84,18 +76,17 @@ const Home = () => {
         sx={{
           marginTop: '2%',
           width: '90%',
-          maxEight: '90%',
+          maxHeight: '90%',
           borderRadius: '10px',
-          borderColor: '#FFFFFF',
-          backgroundColor: '#FFFFFF',
+          borderColor: 'rgb(249,249,249,0.8)',
+          backgroundColor: 'rgb(249,249,249,0.8)',
         }}
       >
         <Stack alignItems="center" spacing={7}>
           <Typography
             variant="h2"
             style={{
-              background:
-                'linear-gradient(39deg, rgba(210,191,195,1) 0%, rgba(170,70,86,1) 50%, rgba(116,13,16,1) 100%)',
+              background: 'black',
               webkitBackgroundClip: 'text',
               WebkitTextFillColor: 'transparent',
               fontFamily: 'skia',

front/src/components/about.js

@@ -2,36 +2,31 @@ import Container from 'react-bootstrap/Container';
 import Nav from 'react-bootstrap/Nav';
 import Navbar from 'react-bootstrap/Navbar';
 import { Link } from 'react-router-dom';
-import logo from './images/logo.png';
+import { Stack, Typography } from '@mui/material';
+import HomeIcon from '@mui/icons-material/Home';
 
 const NavBar = () => {
   return (
     <>
-      <Navbar collapseOnSelect style={{ background: 'white' }} expand="lg">
+      <Navbar collapseOnSelect style={{ background: '#740d10' }} expand="lg">
         <Container>
           <Navbar.Brand as={Link} to={'/'}>
-            <img
-              src={logo}
-              style={{
-                width: 45,
-                height: 45,
-                position: 'absolut',
-              }}
-              alt="logo"
-            />
-            PneumonIA
+            <Stack direction="row" alignItems="center" spacing={1}>
+              <HomeIcon sx={{ color: 'white' }} />
+              <Typography sx={{ color: 'white' }}>PneumonIA</Typography>
+            </Stack>
           </Navbar.Brand>
           <Navbar.Toggle aria-controls="basic-navbar-nav" />
 
           <Navbar.Collapse id="basic-navbar-nav">
             <Nav className="me-auto">
-              <Nav.Link as={Link} to={'/prediction'}>
+              <Nav.Link as={Link} to={'/prediction'} style={{ color: 'white' }}>
                 Pneumonia Detection
               </Nav.Link>
-              <Nav.Link as={Link} to={'/data'}>
+              <Nav.Link as={Link} to={'/data'} style={{ color: 'white' }}>
                 Database
               </Nav.Link>
-              <Nav.Link as={Link} to={'/about'}>
+              <Nav.Link as={Link} to={'/about'} style={{ color: 'white' }}>
                 About
               </Nav.Link>
             </Nav>