[HTML] Add support for input and output files (mit-plv#2014)

Also allow links that pass `&inputType=json` or `&inputType=string`. This will allow us to run the assembly checker in HTML. Currently the inputs are hidden, I haven't wired up the UI yet.
JasonGross · Feb 28, 2025 · 337a125 · 337a125
1 parent 1c166e0
commit 337a125
Show file tree

Hide file tree

Showing 3 changed files with 203 additions and 66 deletions.
diff --git a/fiat-html/fiat-crypto.html b/fiat-html/fiat-crypto.html
@@ -1,10 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <title>Fiat Cryptography Web Interface</title>
     <style>
-        .error { color: red; white-space: pre-wrap; }
+        .error {
+            color: red;
+            white-space: pre-wrap;
+        }
+
         /*code { display: block; white-space: pre-wrap; border: 1px solid #ddd; padding: 10px; position: relative; }*/
         .code-container {
             position: relative;
@@ -16,7 +21,8 @@
             border: 1px solid #ddd;
             padding: 10px;
             position: relative;
-            /*margin-bottom: 20px;*/ /* Space for the button, adjust as needed */
+            /*margin-bottom: 20px;*/
+            /* Space for the button, adjust as needed */
         }
 
         .copy-button {
@@ -29,16 +35,44 @@
             cursor: pointer;
             z-index: 1;
         }
-        .hidden { display: none; }
-        #inputArgs { width: 100%; box-sizing: border-box; }
-        .form-row { display: flex; flex-wrap: wrap; align-items: center; }
-        .form-row label, .form-row button, .status-span, .permalink-span { margin-right: 10px; }
-        .status-span, .permalink-span { flex-grow: 1; text-align: right; }
-        .version { color: #333; }
+
+        .hidden {
+            display: none;
+        }
+
+        #inputArgs {
+            width: 100%;
+            box-sizing: border-box;
+        }
+
+        .form-row {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+        }
+
+        .form-row label,
+        .form-row button,
+        .status-span,
+        .permalink-span {
+            margin-right: 10px;
+        }
+
+        .status-span,
+        .permalink-span {
+            flex-grow: 1;
+            text-align: right;
+        }
+
+        .version {
+            color: #333;
+        }
     </style>
 </head>
+
 <body>
-    <div id="versionContainer"><span class="version">Fiat Cryptography <span id="version"></span> (<a href="https://github.com/mit-plv/fiat-crypto">GitHub Source</a>)</span></div>
+    <div id="versionContainer"><span class="version">Fiat Cryptography <span id="version"></span> (<a
+                href="https://github.com/mit-plv/fiat-crypto">GitHub Source</a>)</span></div>
     <form id="inputForm" class="hidden">
         <div class="form-row">
             <input type="text" id="inputArgs" placeholder="Enter arguments">
@@ -51,7 +85,19 @@
                 <input type="radio" name="inputType" value="string" checked> Input String
             </label>
             <label>
-                <input type="checkbox" id="wasm" name="codeKind" value="wasm"> Use WASM <span id="extraWasmLabel"></span>
+                <input type="checkbox" id="wasm" name="codeKind" value="wasm"> Use WASM <span
+                    id="extraWasmLabel"></span>
+            </label>
+        </div>
+        <div class="form-row" class="hidden">
+            <label class="hidden">Stdin
+                <textarea id="stdin" class="hidden" placeholder="Enter stdin"></textarea>
+            </label>
+            <label class="hidden">Files
+                <textarea id="files" class="hidden" placeholder="Enter files"></textarea>
+            </label>
+            <label class="hidden">Output Files
+                <textarea id="outputFiles" class="hidden" placeholder="Output files"></textarea>
             </label>
         </div>
         <div class="form-row">
@@ -64,14 +110,14 @@
     </form>
     <div id="error" class="error hidden"></div>
     <div id="output" class="hidden">
-      <div id="stdoutContainer" class="code-container">
-        <code id="stdout" class="code"></code>
-        <button class="copy-button" data-target="stdout">Copy</button>
-      </div>
-      <div id="stderrContainer" class="code-container hidden">
-        <code id="stderr" class="code"></code>
-        <button class="copy-button" data-target="stderr">Copy</button>
-      </div>
+        <div id="stdoutContainer" class="code-container">
+            <code id="stdout" class="code"></code>
+            <button class="copy-button" data-target="stdout">Copy</button>
+        </div>
+        <div id="stderrContainer" class="code-container hidden">
+            <code id="stderr" class="code"></code>
+            <button class="copy-button" data-target="stderr">Copy</button>
+        </div>
     </div>
     <script src="version.js"></script>
     <script src="https://unpkg.com/wasm-feature-detect/dist/umd/index.js"></script>
@@ -80,4 +126,5 @@
     <script src="disable-wasm-option.js"></script>
     <script src="copy-button.js"></script>
 </body>
-</html>
+
+</html>