zachcp · November 27, 2022 19:07
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
      <script src="https://cdn.jsdelivr.net/pyodide/v0.21.3/full/pyodide.js"></script>
  </head>
  <body>
    Pyodide test page  <br>
    Open your browser console to see Pyodide output

    <p>You can execute any Python code. Just enter something in the box below and click the button.</p>
    <input id='code' value='sum([1, 2, 3, 4, 5])'>
    <button onclick='evaluatePython()'>Run</button>
    <br>
    <div> Output: </div>
    
    <textarea id='output' style='width: 100%;' rows='6' disabled></textarea> <br>
    
    <h2> Upload GB
      K File Here </h2>
    <input type="file" onchange="previewFile()" /><br />
    <p class="content"></p>


    <script type="text/javascript">

      // global data
      let pyodide;
      let gbk_string;
      let gbk_pyobj;
      let gbk_genes_gaps;
      let parse_gbk_string;

      const output = document.getElementById("output");
      const code   = document.getElementById("code");

      function addToOutput(s) {
        output.value += '>>>' + code.value + '\n' + s + '\n';
      }

      output.value = 'Initializing...\n';


      function evaluatePython() {
      pyodide.runPythonAsync(code.value)
        .then(output => addToOutput(output))
        .catch((err) => { addToOutput(err) });
      }

      // Load the file and save the parsed file as a global variable
      function previewFile() {
        const content = document.querySelector('.content');
        const [file] = document.querySelector('input[type=file]').files;
        const reader = new FileReader();

        reader.addEventListener("load", () => {
          // this will then display a text file
          content.innerText = reader.result;
          gbk_string = reader.result;
          gbk        = parse_gbk_string(gbk_string)
          gbk_genes_gaps = gbk.toJs() // pyproxy conversion
          
        }, false);

        if (file) {
          reader.readAsText(file);
        }
      }
 
      async function main() {
    
        pyodide = await loadPyodide();

        await pyodide.loadPackage("biopython");

        // register a function that will parse input text as a Biopython object.
        pyodide.runPython(`
        from io import StringIO
        from Bio import SeqIO
        
        def parse_gbk_string(genbank_string):
            gbk = SeqIO.read(StringIO(genbank_string), format="genbank")
            return gbk
        `)
        
        // declare global functions
        parse_gbk_string = pyodide.globals.get('parse_gbk_string')
      };

      main();

    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://cdn.jsdelivr.net/pyodide/v0.21.3/full/pyodide.js"></script>
	</head>
	<body>
	Pyodide test page <br>
	Open your browser console to see Pyodide output

	<p>You can execute any Python code. Just enter something in the box below and click the button.</p>
	<input id='code' value='sum([1, 2, 3, 4, 5])'>
	<button onclick='evaluatePython()'>Run</button>
	<br>
	<div> Output: </div>

	<textarea id='output' style='width: 100%;' rows='6' disabled></textarea> <br>

	<h2> Upload GB
	K File Here </h2>
	<input type="file" onchange="previewFile()" /><br />
	<p class="content"></p>


	<script type="text/javascript">

	// global data
	let pyodide;
	let gbk_string;
	let gbk_pyobj;
	let gbk_genes_gaps;
	let parse_gbk_string;

	const output = document.getElementById("output");
	const code = document.getElementById("code");

	function addToOutput(s) {
	output.value += '>>>' + code.value + '\n' + s + '\n';
	}

	output.value = 'Initializing...\n';


	function evaluatePython() {
	pyodide.runPythonAsync(code.value)
	.then(output => addToOutput(output))
	.catch((err) => { addToOutput(err) });
	}

	// Load the file and save the parsed file as a global variable
	function previewFile() {
	const content = document.querySelector('.content');
	const [file] = document.querySelector('input[type=file]').files;
	const reader = new FileReader();

	reader.addEventListener("load", () => {
	// this will then display a text file
	content.innerText = reader.result;
	gbk_string = reader.result;
	gbk = parse_gbk_string(gbk_string)
	gbk_genes_gaps = gbk.toJs() // pyproxy conversion

	}, false);

	if (file) {
	reader.readAsText(file);
	}
	}

	async function main() {

	pyodide = await loadPyodide();

	await pyodide.loadPackage("biopython");

	// register a function that will parse input text as a Biopython object.
	pyodide.runPython(`
	from io import StringIO
	from Bio import SeqIO

	def parse_gbk_string(genbank_string):
	gbk = SeqIO.read(StringIO(genbank_string), format="genbank")
	return gbk
	`)

	// declare global functions
	parse_gbk_string = pyodide.globals.get('parse_gbk_string')
	};

	main();

	</script>
	</body>
	</html>