add component

run.py → app.py

@@ -2,6 +2,7 @@ import gradio as gr
 import torch
 from transformers import AutoTokenizer, AutoModelForCausalLM
 from instruct_pipeline import InstructionTextGenerationPipeline
+import json
 
 model = "databricks/dolly-v2-3b"
 tokenizer = AutoTokenizer.from_pretrained(model, padding_side="left")
@@ -17,9 +18,32 @@ model.eval()
 
 generate_text = InstructionTextGenerationPipeline(model=model, tokenizer=tokenizer)
 
+canvas_html = (
+    "<chat-feeback style='display:flex;justify-content:center;'></chat-feeback>"
+)
+load_js = """
+async () => {
+  const script = document.createElement('script');
+  script.type = "module"
+  script.src = "file=index.js"
+  document.head.appendChild(script);
+}
+"""
+
+
+def accept_response(rating_dummy, msg, chatbot, responseA, responseB, selection_state):
+    ratings = json.loads(rating_dummy)
 
-def clear_chatbot():
-    return None
+    state = [
+        ratings["label"],
+        ratings["value"],
+        responseA if ratings["label"] == "A" else responseB,
+    ]
+
+    selection_state = selection_state + [state]
+    chatbot = [[msg, state[2]]]
+
+    return chatbot, selection_state, selection_state
 
 
 def generate(msg, history):
@@ -37,12 +61,21 @@ def generate(msg, history):
     return responses
 
 
-with gr.Blocks() as demo:
+with gr.Blocks() as blocks:
     chatbot = gr.Chatbot()
     msg = gr.Textbox()
     clear = gr.Button("Clear")
     responseA = gr.Textbox(label="Response A")
     responseB = gr.Textbox(label="Response B")
+    rating_dummy = gr.Textbox(elem_id="rating-dummy", interactive=False, visible=False)
+    ratings_buttons = gr.HTML(canvas_html, visible=False)
+
+    selection_state = gr.State(value=[])
+    selections_df = gr.Dataframe(
+        type="array",
+        headers=["Option", "Value", "Text"],
+        label="Selections",
+    )
 
     def user(user_message, history):
         return gr.update(value="", interactive=False), history + [[user_message, ""]]
@@ -57,15 +90,28 @@ with gr.Blocks() as demo:
         new_history = history[:-1] + [[user_message, chat_history]]
         yield new_history
 
-    response = msg.submit(
-        generate, inputs=[msg, chatbot], outputs=[responseA, responseB]
+    response = (
+        msg.submit(
+            lambda: (gr.update(interactive=False), gr.update(visible=False)),
+            inputs=None,
+            outputs=[msg, ratings_buttons],
+        )
+        .then(generate, inputs=[msg, chatbot], outputs=[responseA, responseB])
+        .then(lambda: gr.update(visible=True), inputs=None, outputs=[ratings_buttons])
     )
+    rating_dummy.change(
+        accept_response,
+        inputs=[rating_dummy, msg, chatbot, responseA, responseB, selection_state],
+        outputs=[chatbot, selection_state, selections_df],
+    ).then(
+        lambda: (gr.update(value="", interactive=True), gr.update(visible=False)),
+        inputs=None,
+        outputs=[msg, ratings_buttons],
+    )
+    response.then(
+        lambda: gr.update(interactive=True), inputs=None, outputs=[msg], queue=False
+    )
+    blocks.load(None, None, None, _js=load_js)
 
-    #     user, inputs=[msg, chatbot], outputs=[msg, chatbot], queue=False
-    # ).then(bot, chatbot, chatbot)
-    response.then(lambda: gr.update(interactive=True), None, [msg], queue=False)
-    clear.click(clear_chatbot, None, chatbot, queue=False)
-
-demo.queue()
-if __name__ == "__main__":
-    demo.launch()
+blocks.queue()
+blocks.launch()

index.js

@@ -0,0 +1,2 @@
+(function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const r of document.querySelectorAll('link[rel="modulepreload"]'))i(r);new MutationObserver(r=>{for(const n of r)if(n.type==="childList")for(const l of n.addedNodes)l.tagName==="LINK"&&l.rel==="modulepreload"&&i(l)}).observe(document,{childList:!0,subtree:!0});function o(r){const n={};return r.integrity&&(n.integrity=r.integrity),r.referrerPolicy&&(n.referrerPolicy=r.referrerPolicy),r.crossOrigin==="use-credentials"?n.credentials="include":r.crossOrigin==="anonymous"?n.credentials="omit":n.credentials="same-origin",n}function i(r){if(r.ep)return;r.ep=!0;const n=o(r);fetch(r.href,n)}})();const U=`*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.relative{position:relative}.inline{display:inline}.flex{display:flex}.rounded-l-lg{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.rounded-r-lg{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.border{border-width:1px}.border-gray-400{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity))}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.font-bold{font-weight:700}:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb;--tw-content: ""}:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;margin:0;line-height:inherit}.hover\\:bg-slate-400:hover{--tw-bg-opacity: 1;background-color:rgb(148 163 184 / var(--tw-bg-opacity))}
+`;function b(){}function L(t){return t()}function C(){return Object.create(null)}function g(t){t.forEach(L)}function B(t){return typeof t=="function"}function q(t,e){return t!=t?e==e:t!==e||t&&typeof t=="object"||typeof t=="function"}function H(t){return Object.keys(t).length===0}function y(t,e){t.appendChild(e)}function I(t,e,o){t.insertBefore(e,o||null)}function $(t){t.parentNode&&t.parentNode.removeChild(t)}function R(t,e){for(let o=0;o<t.length;o+=1)t[o]&&t[o].d(e)}function x(t){return document.createElement(t)}function P(t){return document.createTextNode(t)}function T(){return P(" ")}function D(t,e,o,i){return t.addEventListener(e,o,i),()=>t.removeEventListener(e,o,i)}function _(t,e,o){o==null?t.removeAttribute(e):t.getAttribute(e)!==o&&t.setAttribute(e,o)}function J(t){return Array.from(t.childNodes)}function K(t,e,o,i){o==null?t.style.removeProperty(e):t.style.setProperty(e,o,i?"important":"")}let w;function h(t){w=t}function G(){if(!w)throw new Error("Function called outside component initialization");return w}function Q(t){G().$$.on_mount.push(t)}const f=[],A=[];let p=[];const j=[],V=Promise.resolve();let k=!1;function W(){k||(k=!0,V.then(F))}function v(t){p.push(t)}const m=new Set;let u=0;function F(){if(u!==0)return;const t=w;do{try{for(;u<f.length;){const e=f[u];u++,h(e),X(e.$$)}}catch(e){throw f.length=0,u=0,e}for(h(null),f.length=0,u=0;A.length;)A.pop()();for(let e=0;e<p.length;e+=1){const o=p[e];m.has(o)||(m.add(o),o())}p.length=0}while(f.length);for(;j.length;)j.pop()();k=!1,m.clear(),h(t)}function X(t){if(t.fragment!==null){t.update(),g(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(v)}}function Y(t){const e=[],o=[];p.forEach(i=>t.indexOf(i)===-1?e.push(i):o.push(i)),o.forEach(i=>i()),p=e}const Z=new Set;function tt(t,e){t&&t.i&&(Z.delete(t),t.i(e))}function et(t,e,o,i){const{fragment:r,after_update:n}=t.$$;r&&r.m(e,o),i||v(()=>{const l=t.$$.on_mount.map(L).filter(B);t.$$.on_destroy?t.$$.on_destroy.push(...l):g(l),t.$$.on_mount=[]}),n.forEach(v)}function ot(t,e){const o=t.$$;o.fragment!==null&&(Y(o.after_update),g(o.on_destroy),o.fragment&&o.fragment.d(e),o.on_destroy=o.fragment=null,o.ctx=[])}function rt(t,e){t.$$.dirty[0]===-1&&(f.push(t),W(),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function nt(t,e,o,i,r,n,l,a=[-1]){const c=w;h(t);const s=t.$$={fragment:null,ctx:[],props:n,update:b,not_equal:r,bound:C(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(e.context||(c?c.$$.context:[])),callbacks:C(),dirty:a,skip_bound:!1,root:e.target||c.$$.root};l&&l(s.root);let z=!1;if(s.ctx=o?o(t,e.props||{},(d,E,...S)=>{const N=S.length?S[0]:E;return s.ctx&&r(s.ctx[d],s.ctx[d]=N)&&(!s.skip_bound&&s.bound[d]&&s.bound[d](N),z&&rt(t,d)),E}):[],s.update(),z=!0,g(s.before_update),s.fragment=i?i(s.ctx):!1,e.target){if(e.hydrate){const d=J(e.target);s.fragment&&s.fragment.l(d),d.forEach($)}else s.fragment&&s.fragment.c();e.intro&&tt(t.$$.fragment),et(t,e.target,e.anchor,e.customElement),F()}h(c)}class it{$destroy(){ot(this,1),this.$destroy=b}$on(e,o){if(!B(o))return b;const i=this.$$.callbacks[e]||(this.$$.callbacks[e]=[]);return i.push(o),()=>{const r=i.indexOf(o);r!==-1&&i.splice(r,1)}}$set(e){this.$$set&&!H(e)&&(this.$$.skip_bound=!0,this.$$set(e),this.$$.skip_bound=!1)}}function O(t,e,o){const i=t.slice();return i[4]=e[o],i[6]=o,i}function M(t){let e,o=t[4].label+"",i,r,n,l;function a(){return t[2](t[4])}return{c(){e=x("button"),i=P(o),r=T(),_(e,"class","hover:bg-slate-400 font-bold py-2 px-4 border border-gray-400 "+(t[6]===0?"rounded-l-lg":"")+" "+(t[6]===t[0].length-1?"rounded-r-lg":"")),K(e,"font-size",(1+t[4].value)/2+"rem")},m(c,s){I(c,e,s),y(e,i),y(e,r),n||(l=D(e,"click",a),n=!0)},p(c,s){t=c},d(c){c&&$(e),n=!1,l()}}}function at(t){let e,o,i=t[0],r=[];for(let n=0;n<i.length;n+=1)r[n]=M(O(t,i,n));return{c(){e=x("div"),o=x("div");for(let n=0;n<r.length;n+=1)r[n].c();_(o,"class","flex"),_(e,"class","relative containerbg-white")},m(n,l){I(n,e,l),y(e,o);for(let a=0;a<r.length;a+=1)r[a]&&r[a].m(o,null)},p(n,[l]){if(l&3){i=n[0];let a;for(a=0;a<i.length;a+=1){const c=O(n,i,a);r[a]?r[a].p(c,l):(r[a]=M(c),r[a].c(),r[a].m(o,null))}for(;a<r.length;a+=1)r[a].d(1);r.length=i.length}},i:b,o:b,d(n){n&&$(e),R(r,n)}}}function lt(t){let e;const o=[{label:"A",value:1},{label:"A",value:.5},{label:"A",value:.25},{label:"A",value:0},{label:"B",value:0},{label:"B",value:.25},{label:"B",value:.5},{label:"B",value:1}];Q(()=>{e=document.querySelector("#rating-dummy textarea")});function i(n){if(console.log(n),!e)return;e.value=JSON.stringify(n);const l=new CustomEvent("input");e.dispatchEvent(l)}return[o,i,n=>{i(n)}]}class st extends it{constructor(e){super(),nt(this,e,lt,at,q,{})}}class ct extends HTMLElement{constructor(){super()}connectedCallback(){const e=this.attachShadow({mode:"open"}),o=document.createElement("style");o.appendChild(document.createTextNode(U)),e.appendChild(o),new st({target:e})}}customElements.define("chat-feeback",ct);

requirements.txt

@@ -1,4 +1,5 @@
 gradio
-torch
 transformers
-accelerate
+accelerate
+--extra-index-url https://download.pytorch.org/whl/cu118
+torch