Spaces:

MrOvkill
/

SlidingWindow

Sleeping

App Files Files Community

MrOvkill commited on Jun 12

Commit

13f40ff

•

1 Parent(s): de6160d

yes:

Browse files

Files changed (3) hide show

app.py +26 -19
page.html +85 -0
script.js +68 -0

app.py CHANGED Viewed

@@ -6,6 +6,11 @@ For more information on `huggingface_hub` Inference API support, please check th
 """
 client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")
 def respond(
     message,
@@ -42,22 +47,24 @@ def respond(
 """
 For information on how to customize the ChatInterface, peruse the gradio docs: https://www.gradio.app/docs/chatinterface
 """
-demo = gr.ChatInterface(
-    respond,
-    additional_inputs=[
-        gr.Textbox(value="You are a friendly Chatbot.", label="System message"),
-        gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens"),
-        gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature"),
-        gr.Slider(
-            minimum=0.1,
-            maximum=1.0,
-            value=0.95,
-            step=0.05,
-            label="Top-p (nucleus sampling)",
-        ),
-    ],
-)
-if __name__ == "__main__":
-    demo.launch()

 """
 client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")
+SYSTEM_MAGIC = """
+You have Python function calling. If you output a python type-hinted set of Markdown triple ticks, preceeded by an exclaimation point, the code within will be executed.
+You may execute the following functions:
+"""
 def respond(
     message,
 """
 For information on how to customize the ChatInterface, peruse the gradio docs: https://www.gradio.app/docs/chatinterface
 """
+#demo = gr.ChatInterface(
+#    respond,
+##    additional_inputs=[
+#       gr.Textbox(value="You are a friendly Chatbot.", label="System message"),
+#        gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens"),
+#        gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature"),
+##        gr.Slider(
+##            minimum=0.1,
+ #           maximum=1.0,
+ #           value=0.95,
+ #           step=0.05,
+ #           label="Top-p (nucleus sampling)",
+ #       ),
+ #   ],
+#)
+with gr.Blocks() as demo:
+    with gr.Row():
+        gr.HTML(open("page.html", "r").read())
+    if __name__ == "__main__":
+        demo.launch()

page.html ADDED Viewed

	@@ -0,0 +1,85 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <div style="width: 100%; display: flex; flex-direction: col">
+      <button style="z-index: 1 width: 15%; color: green; background-color: darkslategray; box-shadow: 4px 4px 30px
+  black" id="yomama">Send</button> <input style="z-index: 1; width: 100%;" id="message_input" placeholder="Type messages here..." />
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js" integrity="sha512-WJXVjqeINVpi5XXJ2jn0BSCfp0y80IKrYh731gLRnkAS9TKc5KNt/OfLtu+fCueqdWniouJ1ubM+VI/hbo7POQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script>
+        function setup() {
+  createCanvas(window.innerWidth, window.innerHeight);
+  background(153);
+  textSize(32)
+  textAlign(CENTER);
+  text("Loading...", width / 2, height / 2)
+}
+let txt;
+class SMessage {
+  constructor(send, content) {
+    this.send = send;
+    this.content = content;
+    this.alive = true;
+    this.x = 0;
+    this.y = 32;
+    this.alpha = 255;
+  }
+  draw() {
+    fill(color(0, 0, 0, this.alpha));
+    textSize(18);
+    text(`<${this.send}>: ${this.content}`, this.x, this.y);
+  }
+  update() {
+    this.x += 1;
+    if (this.x > 920) {
+      this.x = 0;
+      this.y += 32;
+    }
+  }
+}
+var _messages = [new SMessage("CLIENT", "Connected!")];
+const minp = document.querySelector("#message_input");
+minp.addEventListener("submit", (evt) => {
+    _messages.push(new SMessage("Me", msg));
+});
+const minp3 = document.querySelector("#yomama");
+minp3.addEventListener("click", (evt) => {
+  const _minp = document.querySelector("#message_input");
+  const val = _minp.value;
+  _minp.value = "";
+  _messages.push(new SMessage("Me", msg));
+});
+socket.on("messag", function(mstr, msg) {
+  _messages.push(new SMessage(mstr, msg));
+  console.log(msg)
+});
+function draw() {
+  background(153);
+  textSize(50)
+  //text(txt, width / 2, height / 2)
+  _messages.forEach((itm) => {
+    if (itm) {
+      itm.draw();
+      itm.update();
+    }
+  });
+}
+socket.on("update", function(number) {
+  txt = number
+})
+</script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,68 @@

+function setup() {
+  createCanvas(window.innerWidth, window.innerHeight);
+  background(153);
+  textSize(32)
+  textAlign(CENTER);
+  text("Loading...", width / 2, height / 2)
+}
+let txt;
+class SMessage {
+  constructor(send, content) {
+    this.send = send;
+    this.content = content;
+    this.alive = true;
+    this.x = 0;
+    this.y = 32;
+    this.alpha = 255;
+  }
+  draw() {
+    fill(color(0, 0, 0, this.alpha));
+    textSize(18);
+    text(`<${this.send}>: ${this.content}`, this.x, this.y);
+  }
+  update() {
+    this.x += 1;
+    if (this.x > 920) {
+      this.x = 0;
+      this.y += 32;
+    }
+  }
+}
+var _messages = [new SMessage("CLIENT", "Connected!")];
+const minp = document.querySelector("#message_input");
+minp.addEventListener("submit", (evt) => {
+    _messages.push(new SMessage("Me", msg));
+});
+const minp3 = document.querySelector("#yomama");
+minp3.addEventListener("click", (evt) => {
+  const _minp = document.querySelector("#message_input");
+  const val = _minp.value;
+  _minp.value = "";
+  _messages.push(new SMessage("Me", msg));
+});
+socket.on("messag", function(mstr, msg) {
+  _messages.push(new SMessage(mstr, msg));
+  console.log(msg)
+});
+function draw() {
+  background(153);
+  textSize(50)
+  //text(txt, width / 2, height / 2)
+  _messages.forEach((itm) => {
+    if (itm) {
+      itm.draw();
+      itm.update();
+    }
+  });
+}
+socket.on("update", function(number) {
+  txt = number
+})