Add Dockerfile for coordinator service and progress controller
Add progress tracking functionality to frontend and backend - Add progress controller endpoint to handle progress updates - Implement socket.io progress updates in UploadPage - Update import path for CircularProgressWithLabel componentpull/48/head
Jaronim Pracht
parent
1b06867d88
commit
d412d5741b
|
|
@ -0,0 +1,21 @@
|
|||
# 1. Python-Image verwenden
|
||||
FROM python:3.11-alpine
|
||||
|
||||
# 2. Arbeitsverzeichnis im Container setzen
|
||||
WORKDIR /app
|
||||
|
||||
# 3. production-style server mit gunicorn
|
||||
RUN pip install gunicorn eventlet
|
||||
|
||||
# 4. requirements.txt kopieren und Pakete installieren
|
||||
COPY requirements.txt .
|
||||
RUN pip install --no-cache-dir -r requirements.txt
|
||||
|
||||
|
||||
# 5. Quellcode kopieren (z.B. app.py)
|
||||
COPY . .
|
||||
|
||||
ENV PYTHONUNBUFFERED=1
|
||||
EXPOSE 5000
|
||||
|
||||
CMD ["gunicorn", "--worker-class", "eventlet", "-w", "1", "--bind", "0.0.0.0:5000", "app:app"]
|
||||
|
|
@ -1,9 +1,11 @@
|
|||
from controller.spacy_contoller import spacy_controller
|
||||
from controller.kpi_setting_controller import kpi_setting_controller
|
||||
from controller.pitch_book_controller import pitch_book_controller
|
||||
from controller.progress_controller import progress_controller
|
||||
|
||||
|
||||
def register_routes(app):
|
||||
app.register_blueprint(kpi_setting_controller)
|
||||
app.register_blueprint(pitch_book_controller)
|
||||
app.register_blueprint(spacy_controller)
|
||||
app.register_blueprint(progress_controller)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
from flask import Blueprint, request, jsonify
|
||||
|
||||
from controller.socketIO import socketio
|
||||
progress_controller = Blueprint("progress", __name__, url_prefix="/api/progress")
|
||||
|
||||
|
||||
@progress_controller.route("/", methods=["POST"])
|
||||
def progress():
|
||||
data = request.get_json()
|
||||
|
||||
if 'id' not in data or 'progress' not in data:
|
||||
return jsonify({"error": "Missing required fields. [id, progress]"}), 400
|
||||
|
||||
if not isinstance(data['progress'], (int, float)) or data['progress'] < 0 or data['progress'] >= 100:
|
||||
return jsonify({"error": "Invalid progress value"}), 400
|
||||
|
||||
socketio.emit("progress", {"id": data["id"], "progress": data["progress"]})
|
||||
# Process the data and return a response
|
||||
return jsonify({"message": "Progress updated"})
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
},
|
||||
"formatter": {
|
||||
"enabled": true,
|
||||
"indentStyle": "space"
|
||||
"indentStyle": "tab"
|
||||
},
|
||||
"organizeImports": {
|
||||
"enabled": true
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -4,175 +4,175 @@ import { useNavigate } from "@tanstack/react-router";
|
|||
import { useCallback, useEffect, useState } from "react";
|
||||
import FileUpload from "react-material-file-upload";
|
||||
import { socket } from "../socket";
|
||||
import { CircularProgressWithLabel } from "./circularProgressWithLabel";
|
||||
import { CircularProgressWithLabel } from "./CircularProgressWithLabel";
|
||||
|
||||
const PROGRESS = false;
|
||||
|
||||
export default function UploadPage() {
|
||||
const [files, setFiles] = useState<File[]>([]);
|
||||
const [pageId, setPageId] = useState<string | null>(null);
|
||||
const [loadingState, setLoadingState] = useState<number | null>(null);
|
||||
const fileTypes = ["pdf"];
|
||||
const navigate = useNavigate();
|
||||
const [files, setFiles] = useState<File[]>([]);
|
||||
const [pageId, setPageId] = useState<string | null>(null);
|
||||
const [loadingState, setLoadingState] = useState<number | null>(null);
|
||||
const fileTypes = ["pdf"];
|
||||
const navigate = useNavigate();
|
||||
|
||||
const uploadFile = useCallback(async () => {
|
||||
const formData = new FormData();
|
||||
formData.append("file", files[0]);
|
||||
const response = await fetch("http://localhost:5050/api/pitch_book", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
});
|
||||
const uploadFile = useCallback(async () => {
|
||||
const formData = new FormData();
|
||||
formData.append("file", files[0]);
|
||||
const response = await fetch("http://localhost:5050/api/pitch_book", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
console.log("File uploaded successfully");
|
||||
const data = await response.json();
|
||||
console.log(data);
|
||||
setPageId(data.id);
|
||||
setLoadingState(0);
|
||||
if (response.ok) {
|
||||
console.log("File uploaded successfully");
|
||||
const data = await response.json();
|
||||
console.log(data);
|
||||
setPageId(data.id);
|
||||
setLoadingState(0);
|
||||
|
||||
!PROGRESS &&
|
||||
navigate({
|
||||
to: "/extractedResult/$pitchBook",
|
||||
params: { pitchBook: data.id },
|
||||
});
|
||||
} else {
|
||||
console.error("Failed to upload file");
|
||||
}
|
||||
}, [files, navigate]);
|
||||
!PROGRESS &&
|
||||
navigate({
|
||||
to: "/extractedResult/$pitchBook",
|
||||
params: { pitchBook: data.id },
|
||||
});
|
||||
} else {
|
||||
console.error("Failed to upload file");
|
||||
}
|
||||
}, [files, navigate]);
|
||||
|
||||
const onConnection = useCallback(() => {
|
||||
console.log("connected");
|
||||
}, []);
|
||||
const onConnection = useCallback(() => {
|
||||
console.log("connected");
|
||||
}, []);
|
||||
|
||||
const onProgress = useCallback(
|
||||
(progress: { id: number; progress: number }) => {
|
||||
console.log("Progress:", progress);
|
||||
console.log(pageId);
|
||||
if (Number(pageId) === progress.id) {
|
||||
setLoadingState(progress.progress);
|
||||
const onProgress = useCallback(
|
||||
(progress: { id: number; progress: number }) => {
|
||||
console.log("Progress:", progress);
|
||||
console.log(pageId);
|
||||
if (Number(pageId) === progress.id) {
|
||||
setLoadingState(progress.progress);
|
||||
|
||||
if (progress.progress === 100) {
|
||||
navigate({
|
||||
to: "/extractedResult/$pitchBook",
|
||||
params: { pitchBook: progress.id.toString() },
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
[pageId, navigate],
|
||||
);
|
||||
if (progress.progress === 100) {
|
||||
navigate({
|
||||
to: "/extractedResult/$pitchBook",
|
||||
params: { pitchBook: progress.id.toString() },
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
[pageId, navigate],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
socket.on("connect", onConnection);
|
||||
socket.on("progress", onProgress);
|
||||
return () => {
|
||||
socket.off("connect", onConnection);
|
||||
socket.off("progress", onProgress);
|
||||
};
|
||||
}, [onConnection, onProgress]);
|
||||
useEffect(() => {
|
||||
socket.on("connect", onConnection);
|
||||
socket.on("progress", onProgress);
|
||||
return () => {
|
||||
socket.off("connect", onConnection);
|
||||
socket.off("progress", onProgress);
|
||||
};
|
||||
}, [onConnection, onProgress]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{PROGRESS && (
|
||||
<Backdrop
|
||||
sx={(theme) => ({ color: "#fff", zIndex: theme.zIndex.drawer + 1 })}
|
||||
open={pageId !== null && loadingState !== null}
|
||||
>
|
||||
<CircularProgressWithLabel
|
||||
color="inherit"
|
||||
value={loadingState || 0}
|
||||
size={60}
|
||||
/>
|
||||
</Backdrop>
|
||||
)}
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
height="100vh"
|
||||
bgcolor="white"
|
||||
>
|
||||
<Box
|
||||
width="100%"
|
||||
maxWidth="1300px"
|
||||
display="flex"
|
||||
justifyContent="flex-end"
|
||||
px={2}
|
||||
>
|
||||
<IconButton onClick={() => navigate({ to: "/config" })}>
|
||||
<SettingsIcon fontSize="large" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
<Paper
|
||||
elevation={3}
|
||||
sx={{
|
||||
width: 900,
|
||||
height: 500,
|
||||
backgroundColor: "#eeeeee",
|
||||
borderRadius: 4,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
maxWidth: "100%",
|
||||
margin: "0px",
|
||||
padding: "0px",
|
||||
"& .MuiBox-root": {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
border: "none",
|
||||
textAlign: "center",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<FileUpload
|
||||
value={files}
|
||||
onChange={setFiles}
|
||||
accept={`.${fileTypes.join(", .")}`}
|
||||
title="Hier Dokument hinziehen"
|
||||
buttonText="Datei auswählen"
|
||||
sx={{
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
padding: "0px",
|
||||
"& svg": {
|
||||
color: "#9e9e9e",
|
||||
},
|
||||
"& .MuiOutlinedInput-notchedOutline": {
|
||||
border: "none",
|
||||
},
|
||||
"& .MuiButton-root": {
|
||||
backgroundColor: "#9e9e9e",
|
||||
},
|
||||
"& .MuiTypography-root": {
|
||||
fontSize: "1.25rem",
|
||||
fontWeight: 500,
|
||||
marginBottom: 1,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Paper>
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={{
|
||||
mt: 4,
|
||||
backgroundColor: "#383838",
|
||||
}}
|
||||
disabled={files.length === 0}
|
||||
onClick={uploadFile}
|
||||
>
|
||||
Kennzahlen extrahieren
|
||||
</Button>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
{PROGRESS && (
|
||||
<Backdrop
|
||||
sx={(theme) => ({ color: "#fff", zIndex: theme.zIndex.drawer + 1 })}
|
||||
open={pageId !== null && loadingState !== null}
|
||||
>
|
||||
<CircularProgressWithLabel
|
||||
color="inherit"
|
||||
value={loadingState || 0}
|
||||
size={60}
|
||||
/>
|
||||
</Backdrop>
|
||||
)}
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
height="100vh"
|
||||
bgcolor="white"
|
||||
>
|
||||
<Box
|
||||
width="100%"
|
||||
maxWidth="1300px"
|
||||
display="flex"
|
||||
justifyContent="flex-end"
|
||||
px={2}
|
||||
>
|
||||
<IconButton onClick={() => navigate({ to: "/config" })}>
|
||||
<SettingsIcon fontSize="large" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
<Paper
|
||||
elevation={3}
|
||||
sx={{
|
||||
width: 900,
|
||||
height: 500,
|
||||
backgroundColor: "#eeeeee",
|
||||
borderRadius: 4,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
maxWidth: "100%",
|
||||
margin: "0px",
|
||||
padding: "0px",
|
||||
"& .MuiBox-root": {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
border: "none",
|
||||
textAlign: "center",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<FileUpload
|
||||
value={files}
|
||||
onChange={setFiles}
|
||||
accept={`.${fileTypes.join(", .")}`}
|
||||
title="Hier Dokument hinziehen"
|
||||
buttonText="Datei auswählen"
|
||||
sx={{
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
padding: "0px",
|
||||
"& svg": {
|
||||
color: "#9e9e9e",
|
||||
},
|
||||
"& .MuiOutlinedInput-notchedOutline": {
|
||||
border: "none",
|
||||
},
|
||||
"& .MuiButton-root": {
|
||||
backgroundColor: "#9e9e9e",
|
||||
},
|
||||
"& .MuiTypography-root": {
|
||||
fontSize: "1.25rem",
|
||||
fontWeight: 500,
|
||||
marginBottom: 1,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Paper>
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={{
|
||||
mt: 4,
|
||||
backgroundColor: "#383838",
|
||||
}}
|
||||
disabled={files.length === 0}
|
||||
onClick={uploadFile}
|
||||
>
|
||||
Kennzahlen extrahieren
|
||||
</Button>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,88 +7,87 @@ import ArrowCircleRightIcon from "@mui/icons-material/ArrowCircleRight";
|
|||
import { Box, IconButton } from "@mui/material";
|
||||
|
||||
interface PDFViewerProps {
|
||||
pitchBookId: string;
|
||||
pitchBookId: string;
|
||||
}
|
||||
|
||||
export default function PDFViewer({ pitchBookId }: PDFViewerProps) {
|
||||
const [numPages, setNumPages] = useState<number | null>(null);
|
||||
const [pageNumber, setPageNumber] = useState(1);
|
||||
const [containerWidth, setContainerWidth] = useState<number | null>(null);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [numPages, setNumPages] = useState<number | null>(null);
|
||||
const [pageNumber, setPageNumber] = useState(1);
|
||||
const [containerWidth, setContainerWidth] = useState<number | null>(null);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => {
|
||||
setNumPages(numPages);
|
||||
};
|
||||
const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => {
|
||||
setNumPages(numPages);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const updateWidth = () => {
|
||||
if (containerRef.current) {
|
||||
setContainerWidth(containerRef.current.offsetWidth);
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
const updateWidth = () => {
|
||||
if (containerRef.current) {
|
||||
setContainerWidth(containerRef.current.offsetWidth);
|
||||
}
|
||||
};
|
||||
|
||||
updateWidth();
|
||||
window.addEventListener("resize", updateWidth);
|
||||
return () => window.removeEventListener("resize", updateWidth);
|
||||
}, []);
|
||||
updateWidth();
|
||||
window.addEventListener("resize", updateWidth);
|
||||
return () => window.removeEventListener("resize", updateWidth);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
width="100%"
|
||||
height="100%"
|
||||
p={2}
|
||||
>
|
||||
<Box
|
||||
ref={containerRef}
|
||||
sx={{
|
||||
width: "100%",
|
||||
maxHeight: "90vh",
|
||||
overflow: "auto",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Document
|
||||
file={`http://localhost:5050/api/pitch_book/${pitchBookId}/download`}
|
||||
onLoadSuccess={onDocumentLoadSuccess}
|
||||
onLoadError={(error) =>
|
||||
console.error("Es gab ein Fehler beim Laden des PDFs:", error)
|
||||
}
|
||||
onSourceError={(error) => console.error("Ungültige PDF:", error)}
|
||||
>
|
||||
{containerWidth && (
|
||||
<Page pageNumber={pageNumber} width={containerWidth * 0.8} />
|
||||
)}
|
||||
</Document>
|
||||
</Box>
|
||||
<Box
|
||||
mt={2}
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
gap={1}
|
||||
>
|
||||
<IconButton
|
||||
disabled={pageNumber <= 1}
|
||||
onClick={() => setPageNumber((p) => p - 1)}
|
||||
>
|
||||
<ArrowCircleLeftIcon fontSize="large" />
|
||||
</IconButton>
|
||||
<span>
|
||||
{pageNumber} / {numPages}
|
||||
</span>
|
||||
<IconButton
|
||||
disabled={pageNumber >= (numPages || 1)}
|
||||
onClick={() => setPageNumber((p) => p + 1)}
|
||||
>
|
||||
<ArrowCircleRightIcon fontSize="large" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
return (
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
width="100%"
|
||||
height="100%"
|
||||
p={2}
|
||||
>
|
||||
<Box
|
||||
ref={containerRef}
|
||||
sx={{
|
||||
width: "100%",
|
||||
maxHeight: "90vh",
|
||||
overflow: "auto",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Document
|
||||
file={`http://localhost:5050/api/pitch_book/${pitchBookId}/download`}
|
||||
onLoadSuccess={onDocumentLoadSuccess}
|
||||
onLoadError={(error) =>
|
||||
console.error("Es gab ein Fehler beim Laden des PDFs:", error)
|
||||
}
|
||||
onSourceError={(error) => console.error("Ungültige PDF:", error)}
|
||||
>
|
||||
{containerWidth && (
|
||||
<Page pageNumber={pageNumber} width={containerWidth * 0.8} />
|
||||
)}
|
||||
</Document>
|
||||
</Box>
|
||||
<Box
|
||||
mt={2}
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
gap={1}
|
||||
>
|
||||
<IconButton
|
||||
disabled={pageNumber <= 1}
|
||||
onClick={() => setPageNumber((p) => p - 1)}
|
||||
>
|
||||
<ArrowCircleLeftIcon fontSize="large" />
|
||||
</IconButton>
|
||||
<span>
|
||||
{pageNumber} / {numPages}
|
||||
</span>
|
||||
<IconButton
|
||||
disabled={pageNumber >= (numPages || 1)}
|
||||
onClick={() => setPageNumber((p) => p + 1)}
|
||||
>
|
||||
<ArrowCircleRightIcon fontSize="large" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue