Login frontend (gradio-app#499)

Author: aliabid94

demo/hello_login/run.py

@@ -0,0 +1,10 @@
+import gradio as gr
+
+user_db = {"admin": "admin", "foo": "bar"}
+
+def greet(name):
+    return "Hello " + name + "!!"
+
+iface = gr.Interface(fn=greet, inputs="text", outputs="text")
+if __name__ == "__main__":
+    iface.launch(auth=lambda u, p: user_db.get(u) == p)

demo/hello_login/screenshot.png

@@ -1,10 +1,8 @@
 import gradio as gr
 
-
 def greet(name):
     return "Hello " + name + "!!"
 
-
 iface = gr.Interface(fn=greet, inputs="text", outputs="text")
 if __name__ == "__main__":
     iface.launch()

demo/hello_world/run.py

@@ -1,10 +1,8 @@
 import gradio as gr
 
-
 def greet(name):
     return "Hello " + name + "!"
 
-
 iface = gr.Interface(
     fn=greet,
     inputs=gr.inputs.Textbox(lines=2, placeholder="Name Here..."),

demo/hello_world_2/run.py

@@ -1,13 +1,11 @@
 import gradio as gr
 
-
 def greet(name, is_morning, temperature):
     salutation = "Good morning" if is_morning else "Good evening"
     greeting = "%s %s. It is %s degrees today" % (salutation, name, temperature)
     celsius = (temperature - 32) * 5 / 9
     return greeting, round(celsius, 2)
 
-
 iface = gr.Interface(
     fn=greet,
     inputs=["text", "checkbox", gr.inputs.Slider(0, 100)],

demo/hello_world_3/run.py

@@ -0,0 +1,23 @@
+<script>
+  export let root;
+</script>
+
+<div class="login container mt-8">
+  <form
+    class="mx-auto p-4 bg-gray-50 shadow-md w-1/2"
+    id="login"
+    method="POST"
+    action={root + "login"}
+  >
+    <h2 class="text-2xl font-semibold my-2">login</h2>
+
+    <label class="block uppercase mt-4" for="username">username</label>
+    <input class="p-2 block" type="text" name="username" />
+    <label class="block uppercase mt-4" for="password">password</label>
+    <input class="p-2 block" type="password" name="password" />
+    <input
+      type="submit"
+      class="block bg-yellow-500 hover:bg-yellow-400 dark:hover:bg-yellow-600 transition px-4 py-2 rounded text-white font-semibold cursor-pointer mt-4"
+    />
+  </form>
+</div>

frontend/src/Login.svelte

@@ -1,29 +1,37 @@
 import App from './App.svelte';
+import Login from "./Login.svelte";
 import { fn } from "./api";
 
 window.launchGradio = (config, element_query) => {
   let target = document.querySelector(element_query);
-  let url = new URL(window.location.toString());
-  if (config.theme !== null && config.theme.startsWith("dark")) {
-    target.classList.add("dark");
-    config.dark = true;
-    if (config.theme === "dark") {
-      config.theme = "default";
-    } else {
-      config.theme = config.theme.substring(5);
-    }
-  } else if (url.searchParams.get("__dark-theme") === "true") {
-    config.dark = true;
-    target.classList.add("dark");
-  }
   if (config.root === undefined) {
     config.root = "BACKEND_URL";
   }
-  config.fn = fn.bind(null, config.root + "api/");
-  const app = new App({
-    target: target,
-    props: config
-  });
+  if (config.detail === "Not authenticated") {
+    new Login({
+      target: target,
+      props: config
+    });
+  } else {
+    let url = new URL(window.location.toString());
+    if (config.theme !== null && config.theme.startsWith("dark")) {
+      target.classList.add("dark");
+      config.dark = true;
+      if (config.theme === "dark") {
+        config.theme = "default";
+      } else {
+        config.theme = config.theme.substring(5);
+      }
+    } else if (url.searchParams.get("__dark-theme") === "true") {
+      config.dark = true;
+      target.classList.add("dark");
+    }
+    config.fn = fn.bind(null, config.root + "api/");
+    new App({
+      target: target,
+      props: config
+    });
+  }
 }
 
 async function get_config() {