ai-content-credentials

Sleeping

App Files Files Community

jclyo1 commited on Sep 1, 2023

Commit

1ec50d0

•

1 Parent(s): 79af4ee

update

Browse files

Files changed (3) hide show

static/index.html +41 -37
static/script.js +1 -1
static/style.css +53 -50

static/index.html CHANGED Viewed

@@ -9,44 +9,48 @@
     <script type="module" src="https://display.truepic.com/truepic_display.es.js"></script>
   </head>
   <body>
-    <main>
-      <section id="text-gen">
-        <h1>Text to Image with Signed Attribution</h1>
-        <div id="outputClass">
         </div>
-        <form class="text-gen-form" style="padding:40px 0;">
-          <label for="text-gen-input">Enter prompt: </label>
-          <input
-            id="text-gen-input"
-            type="text"
-            value=""
-            style="margin:40px 0;"
-          />
-          <label>Inference Steps: </label>
-          <select style="width:20%" id="inference_steps">
-            <option value="5">5</option>
-            <option value="10">10</option>
-            <option value="20">20</option>
-            <option value="50" selected>50</option>
-          </select>
-          <label>Model: </label>
-          <select style="width:20%" id="model">
-            <option value="runwayml/stable-diffusion-v1-5">runwayml/stable-diffusion-v1-5</option>
-            <option value="CompVis/stable-diffusion-v1-4">CompVis/stable-diffusion-v1-4</option>
-            <option value="stabilityai/stable-diffusion-2-1">stabilityai/stable-diffusion-2-1</option>
-          </select>
-          <button id="text-gen-submit">Submit</button>
-        </form>
-          <form method="get" id="redirect-form" action="/"></form>
-      </section>
-    </main>
   </body>
 </html>

     <script type="module" src="https://display.truepic.com/truepic_display.es.js"></script>
   </head>
   <body>
+  <section id="header">
+        <h1>Text-to-image with signed attribution</h1>
+        <p>Dignissim turpis eu eu vel porttitor ipsum rutrum vitae. Condimentum sit bibendum vitae sit morbi sit vitae dolor.</p>
+  </section>
+<section id="content">
+        <div id="column-one">
+            <div class="output">
+              <div class="image-container">
+              </div>
+            </div>
         </div>
+        <div id="column-two">
+          <form class="text-gen-form">
+            <label for="text-gen-input">Image prompt:</label>
+            <textarea
+              id="text-gen-input"
+              style="width:100%;height:80px;"></textarea>
+            <label>Inference Steps: </label>
+            <select id="inference_steps">
+              <option value="5">5</option>
+              <option value="10">10</option>
+              <option value="20">20</option>
+              <option value="50" selected>50</option>
+            </select>
+            <label>Model: </label>
+            <select id="model">
+              <option value="runwayml/stable-diffusion-v1-5">runwayml/stable-diffusion-v1-5</option>
+              <option value="CompVis/stable-diffusion-v1-4">CompVis/stable-diffusion-v1-4</option>
+              <option value="stabilityai/stable-diffusion-2-1">stabilityai/stable-diffusion-2-1</option>
+            </select>
+            <button id="text-gen-submit">Submit</button>
+          </form>
+            <form method="get" id="redirect-form" action="/"></form>
+        </div>
+        </section>
   </body>
 </html>

static/script.js CHANGED Viewed

@@ -42,7 +42,7 @@ textGenForm.addEventListener('submit', async (event) => {
       const resp = await generateImage(textGenInput.value, inferenceSteps.value, model.value);
       const path = "/" + resp;
-      var resultsContainer = document.getElementById('outputClass');
       var truepicDisplay = document.createElement('truepic-display');
       var truepic = document.createElement('img');
       truepic.src = path;

       const resp = await generateImage(textGenInput.value, inferenceSteps.value, model.value);
       const path = "/" + resp;
+      var resultsContainer = document.getElementById('image-container');
       var truepicDisplay = document.createElement('truepic-display');
       var truepic = document.createElement('img');
       truepic.src = path;

static/style.css CHANGED Viewed

@@ -1,51 +1,54 @@
 body {
-    --text: hsl(0 0% 15%);
-    padding: 2.5rem;
-    font-family: sans-serif;
-    color: var(--text);
-  }
-  body.dark-theme {
-    --text: hsl(0 0% 90%);
-    background-color: hsl(223 39% 7%);
-  }
-  main {
-    max-width: 680rem;
-  }
-  section {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-  a {
-    color: var(--text);
-  }
-  form {
-    margin: 0 auto;
-  }
-  label {
-    display: inline-block;
-    width: 18%;
-  }
-  input {
-    width: 80%;
-    margin: 20px 0;
-  }
-  button {
-    cursor: pointer;
-    display: block;
-    margin: 20px 0;
-  }
-  .text-gen-output {
-    min-height: 1.2rem;
-    margin: 1rem;
-    border: 0.5px solid grey;
-  }

+@import url('https://fonts.cdnfonts.com/css/inter');
 body {
+  font-family: 'Inter', sans-serif;
+}
+section {
+  width: 100%;
+}
+section#header {
+  padding: 1rem 10rem;
+  border-bottom: 1px solid rgba(227, 234, 240, 1);
+}
+section#content {
+  display: flex;
+}
+h1 {
+  font-size: 26px;
+  font-weight: 600;
+}
+p {
+  font-size: 14px;
+  font-weight: 400;
+}
+label {
+  display: block;
+  font-weight: 600;
+  font-size: 14px;
+  padding-bottom: .5rem;
+}
+select, textarea {
+  border: 1px solid rgba(227, 234, 240, 1);
+  margin-bottom: 1rem;
+  width: 100%;
+  padding: .5rem;
+}
+#column-one {
+  width: 66%;
+  padding-left: 10rem;
+  border-right: 1px solid rgba(227, 234, 240, 1);
+}
+#column-two {
+  width: 34%;
+  padding: 2rem;
+  padding-right: 10rem;
+}