Draft processing

Author: paolobrasolin

apps/frontend/src/components/Main.tsx

@@ -18,10 +18,63 @@ const Main: React.FC = () => {
 
   const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);
 
-  const handleProcess = () => {
-    console.log('Processing with metadata:', metadata);
-    console.log('Processing with files:', uploadedFiles);
-    // TODO: Implement actual processing logic
+  const formatMetadataAsHeader = (meta: Metadata): string => {
+    return `# docId=${meta.docId}
+# docTitle=${meta.docTitle}
+# contributor=${meta.contributor}
+# corpusRef=${meta.corpusRef}
+# docAuthor=${meta.docAuthor}
+# seeAlso=${meta.seeAlso}
+# description=${meta.description}
+`;
+  };
+
+  const handleProcess = async () => {
+    try {
+      // Format metadata as header
+      const header = formatMetadataAsHeader(metadata);
+
+      // Read all file contents
+      const fileContents = await Promise.all(
+        uploadedFiles.map(async (uploadedFile) => {
+          const content = await readFileContent(uploadedFile.file);
+          return content;
+        })
+      );
+
+      // Concatenate header with all file contents
+      const fullContent = [header, ...fileContents].join('\n');
+
+      // Create and download the file
+      downloadFile(fullContent, 'output.conllu');
+    } catch (error) {
+      console.error('Error processing files:', error);
+    }
+  };
+
+  const readFileContent = (file: File): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        resolve(e.target?.result as string);
+      };
+      reader.onerror = (e) => {
+        reject(e);
+      };
+      reader.readAsText(file);
+    });
+  };
+
+  const downloadFile = (content: string, filename: string) => {
+    const blob = new Blob([content], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
   };
 
   return (

apps/frontend/src/components/ProcessSection.tsx

@@ -1,6 +1,7 @@
 import { Box, Button, Divider, Typography } from '@mui/material';
 import type React from 'react';
-import type { Metadata, UploadedFile } from './MetadataInput';
+import type { UploadedFile } from './FileUpload';
+import type { Metadata } from './MetadataInput';
 
 interface ProcessSectionProps {
   metadata: Metadata;
@@ -21,20 +22,35 @@ const ProcessSection: React.FC<ProcessSectionProps> = ({
       <Divider sx={{ mb: 3 }} />
 
       <Box sx={{ textAlign: 'center', py: 3 }}>
-        <Button
-          variant="contained"
-          size="large"
-          onClick={onProcess}
-          disabled={uploadedFiles.length === 0}
-          sx={{
-            px: 4,
-            py: 2,
-            fontSize: '1.2rem',
-            minWidth: 200,
-          }}
-        >
-          Process Data
-        </Button>
+        <Box sx={{ display: 'flex', gap: 2, justifyContent: 'center', alignItems: 'center' }}>
+          <Button
+            variant="contained"
+            size="large"
+            onClick={onProcess}
+            disabled={uploadedFiles.length === 0}
+            sx={{
+              px: 4,
+              py: 2,
+              fontSize: '1.2rem',
+              minWidth: 200,
+            }}
+          >
+            Download CoNLL-U
+          </Button>
+          <Button
+            variant="outlined"
+            size="large"
+            disabled
+            sx={{
+              px: 4,
+              py: 2,
+              fontSize: '1.2rem',
+              minWidth: 200,
+            }}
+          >
+            Download Turtle
+          </Button>
+        </Box>
         {uploadedFiles.length === 0 && (
           <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
             Upload at least one file to enable processing