Merge pull request #16 from ashirrwad/input-capability

Code runs on a single container, added input capability

Author: everythingfunctional

Backend/app.py

@@ -1,6 +1,6 @@
-#importing dependencies - Flask for server and docker to communicate with docker API
+# importing dependencies - Flask for server and docker to communicate with docker API
 from flask import Flask, jsonify, request
-from flask_cors import CORS,cross_origin
+from flask_cors import CORS, cross_origin
 import docker
 import os
 import tarfile
@@ -9,53 +9,69 @@
 
 cors = CORS(app)
 
-app.config['CORS_HEADERS'] = 'Content-Type'
+app.config["CORS_HEADERS"] = "Content-Type"
 
-#Editing the file with code inside editor
-def edit_file(code):
-  Fortran_file = open('./File.f90','w+')
-  Fortran_file.write(code)
+# Starting container
+client = docker.from_env()
+container = client.containers.run("playground-small", tty=True, detach=True)
 
+# Editing the file with code inside editor
+def edit_file(code, input=""):
+    Fortran_file = open("./File.f90", "w+")
+    Fortran_file.write(code)
+    program_input = open("./program_input.txt", "w+")
+    program_input.write(input)
 
 
-#Copying file with fortran code to container
+# Copying file with fortran code to container
 def copy_to(src, dst, container):
-  dst = dst
-  container = container
+    dst = dst
+    container = container
 
-  os.chdir(os.path.dirname(src))
-  srcname = os.path.basename(src)
-  tar = tarfile.open(src + '.tar', mode='w')
-  try:
-    tar.add(srcname)
-  finally:
-    tar.close()
+    os.chdir(os.path.dirname(src))
+    srcname = os.path.basename(src)
+    tar = tarfile.open(src + ".tar", mode="w")
+    try:
+        tar.add(srcname)
+    finally:
+        tar.close()
 
-  data = open(src + '.tar', 'rb').read()
-  container.put_archive(os.path.dirname(dst), data)
+    data = open(src + ".tar", "rb").read()
+    container.put_archive(os.path.dirname(dst), data)
 
 
-#Executing code inside container and getting it's output
+# Executing code inside container and getting it's output
 def execute_code_in_container():
-  client = docker.from_env()
-  container = client.containers.run('playground-small', tty=True,detach=True)
-  copy_to('./File.f90', '/fortran/File.f90',container)
-  container.exec_run('gfortran File.f90 -o executed_file.o',demux=True)
-  a = container.exec_run('./executed_file.o')
-  container.stop()
-  return a
-    
-
-#API Endpoint to submit code
-@app.route('/run', methods=['POST','GET','OPTIONS'])
+    copy_to("./File.f90", "/fortran/File.f90", container)
+    copy_to("./program_input.txt", "/fortran/program_input.txt", container)
+    executable = container.exec_run(
+        "gfortran File.f90 -o executed_file.o", demux=True
+    )
+    if executable.exit_code == 0:
+        a = container.exec_run(
+            'sh -c "cat program_input.txt | ./executed_file.o"', demux=True
+        )
+    else:
+        a = executable
+    return a
+
+
+# API Endpoint to submit code
+@app.route("/run", methods=["POST", "GET", "OPTIONS"])
 @cross_origin()
 def run_code():
-  data = request.get_json()
-  edit_file(data["code"])
-  code_result = execute_code_in_container()
-  output = jsonify({"executed" : code_result.output.decode()})
-  return output, 202
+    data = request.get_json()
+    edit_file(data["code"], data["programInput"])
+    code_result = execute_code_in_container()
+    if code_result.exit_code == 0:
+        print(code_result.output[0].decode())
+        output = jsonify({"executed": code_result.output[0].decode()})
+    else:
+        print(code_result.output[1].decode())
+        output = jsonify({"executed": code_result.output[1].decode()})
+
+    return output, 202
 
-if __name__ == '__main__':
-  app.run(debug = True)
 
+if __name__ == "__main__":
+    app.run(debug=True)

frontend/src/App.css

@@ -9,6 +9,10 @@
   height: 35rem;
   width: 40%;
   border: 2px solid black;
+  padding: 0.2rem;
+  display:  flex;
+  flex-direction: column;
+  justify-content: space-between;
 
 }
 
@@ -37,3 +41,7 @@
 
 }
 
+.output-formmating{
+  white-space: pre-wrap;
+
+}

frontend/src/App.js

@@ -10,22 +10,38 @@ import Spinner from 'react-bootstrap/Spinner'
 import Card from 'react-bootstrap/Card'
 import RunCode from './run.png'
 import ResetCode from './reset.png'
+import InputBox from './InputBox';
+
+
+function NewlineText(props) {
+  const text = props.text;
+  return <div className='output-formmating'>{text}</div>;
+}
+
 
 function App() {
   const [ text, setText ] = useState('') //State to store editor code
   const [output, setOutput] = useState('')//State to store output
   const [isLoading, setIsLoading] = useState(false);//Loading animations
+  const [ input, setInput ] = useState('')
+
+  
+  const handleInputChange = (e) => {
+    e.preventDefault(); // prevent the default action
+    setInput(e.target.value); // set name to e.target.value (event)
+    console.log(input)
+  };
+
 
   //POST request to Flask server
   const handleClick = async () => {
 
     setOutput('')
     setIsLoading(true);
       // POST request using axios inside useEffect React hook
-            await axios.post('http://127.0.0.1:5000/run', {code : text})
+            await axios.post('http://127.0.0.1:5000/run', {code : text, programInput: input})
           .then((response) => {setOutput(response.data.executed)});
           setIsLoading(false);
-    console.log(output)
   }
 
   const resetCode = () => {
@@ -40,6 +56,7 @@ function App() {
       <div className='code-wrapper'>
       {/*Editor Component*/}
       <Editor value={text} onChange={value => setText(value)}/>
+      
       {/* Buttons */}
       <div className='options'><Button onClick={resetCode} ><img src={ResetCode} /></Button>
       <Button variant="run" onClick={handleClick}><img src={RunCode} /></Button>
@@ -69,13 +86,17 @@ function App() {
             <Card.Body>
 
               <Card.Text>
+                {/* Spinning Animation While Request is processed */}
               {isLoading ? <p className='loading'><Spinner animation="border" size="sm" /></p> : null}
-                {output}
+                <NewlineText text={output} />
               </Card.Text>
 
             </Card.Body>
           </Card>
+          {/* Input Box to provide input for program */}
+          <InputBox value={input} onChange={handleInputChange}/>
       </div>
+      
       </div>
     </div>
   );

frontend/src/InputBox.js

@@ -0,0 +1,17 @@
+import Form from 'react-bootstrap/Form'
+
+export default function InputBox(props){
+    
+
+    
+    return(
+        <>
+            <Form>
+                <Form.Group>
+                    <Form.Label>Custom Input</Form.Label>
+                    <Form.Control value={props.value} onChange={props.onChange} as="textarea" rows={3} />
+                </Form.Group>
+            </Form>
+        </>
+    )
+}