From d23998c0d7de8d740977ba491aaa78d4a4aea7d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florian=20Ho=CC=88nicke?= <hoenicke.florian@gmail.com>
Date: Mon, 20 Mar 2023 01:21:17 +0100
Subject: [PATCH] feat: frontend

---
 main.py                        |  4 +++-
 microchain-frontend/src/App.js | 19 ++++++++++++++++---
 src/prompt_tasks.py            |  7 +++++--
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/main.py b/main.py
index 16aefad..6f21b4e 100644
--- a/main.py
+++ b/main.py
@@ -62,10 +62,12 @@ async def main(
     recreate_folder(EXECUTOR_FOLDER)
     system_definition = (
             "You are a principal engineer working at Jina - an open source company."
-            "Using the Jina framework, users can define executors."
+            "Using the Jina framework, users can define executors. "
             + executor_example
             + docarray_example
             + client_example
+            + "The user is asking you to create an executor with all the necessary files "
+              "and you write the complete code without leaving something out. "
     )
 
     user_query = (
diff --git a/microchain-frontend/src/App.js b/microchain-frontend/src/App.js
index 07ddebe..bc1383e 100644
--- a/microchain-frontend/src/App.js
+++ b/microchain-frontend/src/App.js
@@ -1,6 +1,8 @@
 import React, {useState} from 'react';
 import axios from 'axios';
-import {Box, Button, Container, FormControl, InputLabel, MenuItem, Select, TextField, Typography,} from '@mui/material';
+import {Box, Container, FormControl, InputLabel, MenuItem, Select, TextField, Typography,} from '@mui/material';
+import copy from 'clipboard-copy';
+import Button from '@mui/material/Button';
 
 function App() {
     const [executorName, setExecutorName] = useState('MyCoolOcrExecutor');
@@ -30,6 +32,7 @@ function App() {
 
         try {
             const response = await axios.post('http://0.0.0.0:8000/create', requestBody);
+            console.log(response.data)
             setResponseText(response.data);
         } catch (error) {
             console.error(error);
@@ -37,6 +40,9 @@ function App() {
         }
     };
 
+    const handleCopy = (fileContent) => {
+        copy(fileContent);
+    };
 
     return (
         <Container maxWidth="md">
@@ -165,16 +171,23 @@ function App() {
                             Response
                         </Typography>
                         {Object.entries(responseText.result).map(([fileName, fileContent]) => (
-                            <Box key={fileName} sx={{my: 2}}>
+                            <Box key={fileName} sx={{my: 2, p: 2, border: '1px solid #ddd', borderRadius: '4px'}}>
                                 <Typography variant="subtitle1" gutterBottom>
                                     {fileName}
                                 </Typography>
                                 <pre>{fileContent}</pre>
+                                <Button
+                                    onClick={() => handleCopy(fileContent)}
+                                    variant="outlined"
+                                    color="primary"
+                                    size="small"
+                                >
+                                    Copy Code
+                                </Button>
                             </Box>
                         ))}
                     </Box>
                 )}
-
             </Box>
         </Container>
     );
diff --git a/src/prompt_tasks.py b/src/prompt_tasks.py
index 4ca4633..86291c1 100644
--- a/src/prompt_tasks.py
+++ b/src/prompt_tasks.py
@@ -7,10 +7,13 @@ def general_guidelines():
         "General guidelines: "
         "The code you write is production ready. "
         "Every file starts with comments describing what the code is doing before the first import. "
+        "Comments can only be written between tags. "
         "Then all imports are listed. "
         "It is important to import all modules that could be needed in the executor code. "
-        "Always import BytesIO from io. "
-        "Comments can only be written between tags. "
+        "Always import: "
+        "from typing import Dict, List, Optional, Tuple, Union "
+        "from io import BytesIO "
+        "from jina import Executor, DocumentArray, Document, requests "
         "Start from top-level and then fully implement all methods. "
         "\n"
     )