Upload 4 files

app (15).py

@@ -0,0 +1,456 @@
+import datetime
+import os
+import random
+import re
+from io import StringIO
+
+import gradio as gr
+import pandas as pd
+from huggingface_hub import upload_file
+from text_generation import Client
+
+from dialogues import DialogueTemplate
+from share_btn import (community_icon_html, loading_icon_html, share_btn_css,
+                       share_js)
+
+HF_TOKEN = os.environ.get("HF_TOKEN", None)
+API_TOKEN = os.environ.get("API_TOKEN", None)
+DIALOGUES_DATASET = "HuggingFaceH4/starchat_playground_dialogues"
+
+model2endpoint = {
+    "starchat-alpha": "https://api-inference.huggingface.co/models/HuggingFaceH4/starcoderbase-finetuned-oasst1",
+    "starchat-beta": "https://api-inference.huggingface.co/models/HuggingFaceH4/starchat-beta",
+}
+model_names = list(model2endpoint.keys())
+
+
+def randomize_seed_generator():
+    seed = random.randint(0, 1000000)
+    return seed
+
+
+def save_inputs_and_outputs(now, inputs, outputs, generate_kwargs, model):
+    buffer = StringIO()
+    timestamp = datetime.datetime.now().strftime("%Y-%m-%dT%H:%M:%S.%f")
+    file_name = f"prompts_{timestamp}.jsonl"
+    data = {"model": model, "inputs": inputs, "outputs": outputs, "generate_kwargs": generate_kwargs}
+    pd.DataFrame([data]).to_json(buffer, orient="records", lines=True)
+
+    # Push to Hub
+    upload_file(
+        path_in_repo=f"{now.date()}/{now.hour}/{file_name}",
+        path_or_fileobj=buffer.getvalue().encode(),
+        repo_id=DIALOGUES_DATASET,
+        token=HF_TOKEN,
+        repo_type="dataset",
+    )
+
+    # Clean and rerun
+    buffer.close()
+
+
+def get_total_inputs(inputs, chatbot, preprompt, user_name, assistant_name, sep):
+    past = []
+    for data in chatbot:
+        user_data, model_data = data
+
+        if not user_data.startswith(user_name):
+            user_data = user_name + user_data
+        if not model_data.startswith(sep + assistant_name):
+            model_data = sep + assistant_name + model_data
+
+        past.append(user_data + model_data.rstrip() + sep)
+
+    if not inputs.startswith(user_name):
+        inputs = user_name + inputs
+
+    total_inputs = preprompt + "".join(past) + inputs + sep + assistant_name.rstrip()
+
+    return total_inputs
+
+
+def wrap_html_code(text):
+    pattern = r"<.*?>"
+    matches = re.findall(pattern, text)
+    if len(matches) > 0:
+        return f"```{text}```"
+    else:
+        return text
+
+
+def has_no_history(chatbot, history):
+    return not chatbot and not history
+
+
+def generate(
+    RETRY_FLAG,
+    model_name,
+    system_message,
+    user_message,
+    chatbot,
+    history,
+    temperature,
+    top_k,
+    top_p,
+    max_new_tokens,
+    repetition_penalty,
+    do_save=True,
+):
+    client = Client(
+        model2endpoint[model_name],
+        headers={"Authorization": f"Bearer {API_TOKEN}"},
+        timeout=60,
+    )
+    # Don't return meaningless message when the input is empty
+    if not user_message:
+        print("Empty input")
+
+    if not RETRY_FLAG:
+        history.append(user_message)
+        seed = 42
+    else:
+        seed = randomize_seed_generator()
+
+    past_messages = []
+    for data in chatbot:
+        user_data, model_data = data
+
+        past_messages.extend(
+            [{"role": "user", "content": user_data}, {"role": "assistant", "content": model_data.rstrip()}]
+        )
+
+    if len(past_messages) < 1:
+        dialogue_template = DialogueTemplate(
+            system=system_message, messages=[{"role": "user", "content": user_message}]
+        )
+        prompt = dialogue_template.get_inference_prompt()
+    else:
+        dialogue_template = DialogueTemplate(
+            system=system_message, messages=past_messages + [{"role": "user", "content": user_message}]
+        )
+        prompt = dialogue_template.get_inference_prompt()
+
+    generate_kwargs = {
+        "temperature": temperature,
+        "top_k": top_k,
+        "top_p": top_p,
+        "max_new_tokens": max_new_tokens,
+    }
+
+    temperature = float(temperature)
+    if temperature < 1e-2:
+        temperature = 1e-2
+    top_p = float(top_p)
+
+    generate_kwargs = dict(
+        temperature=temperature,
+        max_new_tokens=max_new_tokens,
+        top_p=top_p,
+        repetition_penalty=repetition_penalty,
+        do_sample=True,
+        truncate=4096,
+        seed=seed,
+        stop_sequences=["<|end|>"],
+    )
+
+    stream = client.generate_stream(
+        prompt,
+        **generate_kwargs,
+    )
+
+    output = ""
+    for idx, response in enumerate(stream):
+        if response.token.special:
+            continue
+        output += response.token.text
+        if idx == 0:
+            history.append(" " + output)
+        else:
+            history[-1] = output
+
+        chat = [
+            (wrap_html_code(history[i].strip()), wrap_html_code(history[i + 1].strip()))
+            for i in range(0, len(history) - 1, 2)
+        ]
+
+        # chat = [(history[i].strip(), history[i + 1].strip()) for i in range(0, len(history) - 1, 2)]
+
+        yield chat, history, user_message, ""
+
+    if HF_TOKEN and do_save:
+        try:
+            now = datetime.datetime.now()
+            current_time = now.strftime("%Y-%m-%d %H:%M:%S")
+            print(f"[{current_time}] Pushing prompt and completion to the Hub")
+            save_inputs_and_outputs(now, prompt, output, generate_kwargs, model_name)
+        except Exception as e:
+            print(e)
+
+    return chat, history, user_message, ""
+
+
+examples = [
+    "How can I write a Python function to generate the nth Fibonacci number?",
+    "How do I get the current date using shell commands? Explain how it works.",
+    "What's the meaning of life?",
+    "Write a function in Javascript to reverse words in a given string.",
+    "Give the following data {'Name':['Tom', 'Brad', 'Kyle', 'Jerry'], 'Age':[20, 21, 19, 18], 'Height' : [6.1, 5.9, 6.0, 6.1]}. Can you plot one graph with two subplots as columns. The first is a bar graph showing the height of each person. The second is a bargraph showing the age of each person? Draw the graph in seaborn talk mode.",
+    "Create a regex to extract dates from logs",
+    "How to decode JSON into a typescript object",
+    "Write a list into a jsonlines file and save locally",
+]
+
+
+def clear_chat():
+    return [], []
+
+
+def delete_last_turn(chat, history):
+    if chat and history:
+        chat.pop(-1)
+        history.pop(-1)
+        history.pop(-1)
+    return chat, history
+
+
+def process_example(args):
+    for [x, y] in generate(args):
+        pass
+    return [x, y]
+
+
+# Regenerate response
+def retry_last_answer(
+    selected_model,
+    system_message,
+    user_message,
+    chat,
+    history,
+    temperature,
+    top_k,
+    top_p,
+    max_new_tokens,
+    repetition_penalty,
+    do_save,
+):
+    if chat and history:
+        # Removing the previous conversation from chat
+        chat.pop(-1)
+        # Removing bot response from the history
+        history.pop(-1)
+        # Setting up a flag to capture a retry
+        RETRY_FLAG = True
+        # Getting last message from user
+        user_message = history[-1]
+
+    yield from generate(
+        RETRY_FLAG,
+        selected_model,
+        system_message,
+        user_message,
+        chat,
+        history,
+        temperature,
+        top_k,
+        top_p,
+        max_new_tokens,
+        repetition_penalty,
+        do_save,
+    )
+
+
+title = """<h1 align="center">⭐ StarChat Playground 💬</h1>"""
+custom_css = """
+#banner-image {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#chat-message {
+    font-size: 14px;
+    min-height: 300px;
+}
+"""
+
+with gr.Blocks(analytics_enabled=False, css=custom_css) as demo:
+    gr.HTML(title)
+
+    with gr.Row():
+        with gr.Column():
+            gr.Image("thumbnail.png", elem_id="banner-image", show_label=False)
+        with gr.Column():
+            gr.Markdown(
+                """
+            💻 This demo showcases a series of **[StarChat](https://huggingface.co/models?search=huggingfaceh4/starchat)** language models, which are fine-tuned versions of the StarCoder family to act as helpful coding assistants.  The base model has 16B parameters and was pretrained on one trillion tokens sourced from 80+ programming languages, GitHub issues, Git commits, and Jupyter notebooks (all permissively licensed).
+
+            📝 For more details, check out our [blog post](https://huggingface.co/blog/starchat-alpha).
+
+            ⚠️ **Intended Use**: this app and its [supporting models](https://huggingface.co/models?search=huggingfaceh4/starchat) are provided as educational tools to explain large language model fine-tuning; not to serve as replacement for human expertise.
+
+            ⚠️ **Known Failure Modes**: the alpha and beta version of **StarChat** have not been aligned to human preferences with techniques like RLHF, so they can produce problematic outputs (especially when prompted to do so). Since the base model was pretrained on a large corpus of code, it may produce code snippets that are syntactically valid but semantically incorrect.  For example, it may produce code that does not compile or that produces incorrect results.  It may also produce code that is vulnerable to security exploits.  We have observed the model also has a tendency to produce false URLs which should be carefully inspected before clicking. For more details on the model's limitations in terms of factuality and biases, see the [model card](https://huggingface.co/HuggingFaceH4/starchat-alpha#bias-risks-and-limitations).
+
+            ⚠️ **Data Collection**: by default, we are collecting the prompts entered in this app to further improve and evaluate the models. Do **NOT** share any personal or sensitive information while using the app! You can opt out of this data collection by removing the checkbox below.
+    """
+            )
+
+    with gr.Row():
+        do_save = gr.Checkbox(
+            value=True,
+            label="Store data",
+            info="You agree to the storage of your prompt and generated text for research and development purposes:",
+        )
+
+    with gr.Row():
+        selected_model = gr.Radio(choices=model_names, value=model_names[1], label="Select a model")
+
+    with gr.Accordion(label="System Prompt", open=False, elem_id="parameters-accordion"):
+        system_message = gr.Textbox(
+            elem_id="system-message",
+            placeholder="Below is a conversation between a human user and a helpful AI coding assistant.",
+            show_label=False,
+        )
+    with gr.Row():
+        with gr.Box():
+            output = gr.Markdown()
+            chatbot = gr.Chatbot(elem_id="chat-message", label="Chat")
+
+    with gr.Row():
+        with gr.Column(scale=3):
+            user_message = gr.Textbox(placeholder="Enter your message here", show_label=False, elem_id="q-input")
+            with gr.Row():
+                send_button = gr.Button("Send", elem_id="send-btn", visible=True)
+
+                regenerate_button = gr.Button("Regenerate", elem_id="retry-btn", visible=True)
+
+                delete_turn_button = gr.Button("Delete last turn", elem_id="delete-btn", visible=True)
+
+                clear_chat_button = gr.Button("Clear chat", elem_id="clear-btn", visible=True)
+
+            with gr.Accordion(label="Parameters", open=False, elem_id="parameters-accordion"):
+                temperature = gr.Slider(
+                    label="Temperature",
+                    value=0.2,
+                    minimum=0.0,
+                    maximum=1.0,
+                    step=0.1,
+                    interactive=True,
+                    info="Higher values produce more diverse outputs",
+                )
+                top_k = gr.Slider(
+                    label="Top-k",
+                    value=50,
+                    minimum=0.0,
+                    maximum=100,
+                    step=1,
+                    interactive=True,
+                    info="Sample from a shortlist of top-k tokens",
+                )
+                top_p = gr.Slider(
+                    label="Top-p (nucleus sampling)",
+                    value=0.95,
+                    minimum=0.0,
+                    maximum=1,
+                    step=0.05,
+                    interactive=True,
+                    info="Higher values sample more low-probability tokens",
+                )
+                max_new_tokens = gr.Slider(
+                    label="Max new tokens",
+                    value=512,
+                    minimum=0,
+                    maximum=1024,
+                    step=4,
+                    interactive=True,
+                    info="The maximum numbers of new tokens",
+                )
+                repetition_penalty = gr.Slider(
+                    label="Repetition Penalty",
+                    value=1.2,
+                    minimum=0.0,
+                    maximum=10,
+                    step=0.1,
+                    interactive=True,
+                    info="The parameter for repetition penalty. 1.0 means no penalty.",
+                )
+            # with gr.Group(elem_id="share-btn-container"):
+            #     community_icon = gr.HTML(community_icon_html, visible=True)
+            #     loading_icon = gr.HTML(loading_icon_html, visible=True)
+            # share_button = gr.Button("Share to community", elem_id="share-btn", visible=True)
+            with gr.Row():
+                gr.Examples(
+                    examples=examples,
+                    inputs=[user_message],
+                    cache_examples=False,
+                    fn=process_example,
+                    outputs=[output],
+                )
+
+    history = gr.State([])
+    RETRY_FLAG = gr.Checkbox(value=False, visible=False)
+
+    # To clear out "message" input textbox and use this to regenerate message
+    last_user_message = gr.State("")
+
+    user_message.submit(
+        generate,
+        inputs=[
+            RETRY_FLAG,
+            selected_model,
+            system_message,
+            user_message,
+            chatbot,
+            history,
+            temperature,
+            top_k,
+            top_p,
+            max_new_tokens,
+            repetition_penalty,
+            do_save,
+        ],
+        outputs=[chatbot, history, last_user_message, user_message],
+    )
+
+    send_button.click(
+        generate,
+        inputs=[
+            RETRY_FLAG,
+            selected_model,
+            system_message,
+            user_message,
+            chatbot,
+            history,
+            temperature,
+            top_k,
+            top_p,
+            max_new_tokens,
+            repetition_penalty,
+            do_save,
+        ],
+        outputs=[chatbot, history, last_user_message, user_message],
+    )
+
+    regenerate_button.click(
+        retry_last_answer,
+        inputs=[
+            selected_model,
+            system_message,
+            user_message,
+            chatbot,
+            history,
+            temperature,
+            top_k,
+            top_p,
+            max_new_tokens,
+            repetition_penalty,
+            do_save,
+        ],
+        outputs=[chatbot, history, last_user_message, user_message],
+    )
+
+    delete_turn_button.click(delete_last_turn, [chatbot, history], [chatbot, history])
+    clear_chat_button.click(clear_chat, outputs=[chatbot, history])
+    selected_model.change(clear_chat, outputs=[chatbot, history])
+    # share_button.click(None, [], [], _js=share_js)
+
+demo.queue(concurrency_count=16).launch(debug=True)

dialogues.py

@@ -0,0 +1,241 @@
+# coding=utf-8
+# Copyright 2023 The HuggingFace Team. All rights reserved.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+import json
+import os
+from dataclasses import asdict, dataclass
+from pathlib import Path
+from typing import Any, Dict, List, Optional, Type, TypeVar, Union
+
+from huggingface_hub import ModelHubMixin, hf_hub_download
+
+# Generic variable that is either ModelHubMixin or a subclass thereof
+T = TypeVar("T", bound="ModelHubMixin")
+
+TEMPLATE_FILENAME = "dialogue_template.json"
+IGNORE_INDEX = -100
+
+
+@dataclass
+class DialogueTemplate(ModelHubMixin):
+    """Converts all turns of a dialogue between a user and assistant to a standardized format.
+
+    Adapted from OpenAI's ChatML (https://github.com/openai/openai-python/blob/main/chatml.md) and Vicuna (https://github.com/lm-sys/FastChat/blob/main/fastchat/conversation.py)
+    """
+
+    system: str
+    messages: List[Dict[str, str]] = None
+    system_token: str = "<|system|>"
+    user_token: str = "<|user|>"
+    assistant_token: str = "<|assistant|>"
+    end_token: str = "<|end|>"
+
+    def get_training_prompt(self) -> str:
+        prompt = self.system_token + "\n" + self.system + self.end_token + "\n"
+        if self.messages is None:
+            raise ValueError("Dialogue template must have at least one message.")
+        for message in self.messages:
+            if message["role"] == "user":
+                prompt += self.user_token + "\n" + message["content"] + self.end_token + "\n"
+            else:
+                prompt += self.assistant_token + "\n" + message["content"] + self.end_token + "\n"
+        return prompt
+
+    def get_inference_prompt(self) -> str:
+        prompt = self.system_token + "\n" + self.system + self.end_token + "\n"
+        if self.messages is None:
+            raise ValueError("Dialogue template must have at least one message.")
+        for message in self.messages:
+            if message["role"] == "user":
+                prompt += self.user_token + "\n" + message["content"] + self.end_token + "\n"
+            else:
+                prompt += self.assistant_token + "\n" + message["content"] + self.end_token + "\n"
+        prompt += self.assistant_token + "\n"
+        return prompt
+
+    def get_dialogue(self):
+        """Helper function to format the messages as an easy-to-read dialogue."""
+        prompt = ""
+        if self.messages is None:
+            raise ValueError("Dialogue template must have at least one message.")
+        for message in self.messages:
+            if message["role"] == "user":
+                prompt += "\n\nHuman: " + message["content"]
+            else:
+                prompt += "\n\nAssistant: " + message["content"]
+        return prompt
+
+    def get_special_tokens(self) -> List[str]:
+        return [self.system_token, self.user_token, self.assistant_token, self.end_token]
+
+    def copy(self):
+        return DialogueTemplate(
+            system=self.system,
+            messages=self.messages,
+            system_token=self.system_token,
+            user_token=self.user_token,
+            assistant_token=self.assistant_token,
+            end_token=self.end_token,
+        )
+
+    def to_dict(self) -> Dict[str, Any]:
+        return {k: v for k, v in asdict(self).items()}
+
+    @classmethod
+    def from_dict(cls, data):
+        return DialogueTemplate(
+            system=data["system"] if "system" in data else "",
+            messages=data["messages"] if "messages" in data else None,
+            system_token=data["system_token"] if "system_token" in data else "<|system|>",
+            user_token=data["user_token"] if "user_token" in data else "<|user|>",
+            assistant_token=data["assistant_token"] if "assistant_token" in data else "<|assistant|>",
+            end_token=data["end_token"] if "end_token" in data else "<|end|>",
+        )
+
+    def _save_pretrained(self, save_directory: Union[str, Path]) -> None:
+        save_directory = Path(save_directory)
+        save_directory.mkdir(exist_ok=True)
+        with open(save_directory / "dialogue_template.json", "w") as f:
+            json.dump(self.to_dict(), f, indent=2)
+
+    @classmethod
+    def _from_pretrained(
+        cls: Type[T],
+        *,
+        model_id: str,
+        revision: Optional[str],
+        cache_dir: Optional[Union[str, Path]],
+        force_download: bool,
+        proxies: Optional[Dict],
+        resume_download: bool,
+        local_files_only: bool,
+        token: Optional[Union[str, bool]],
+        **model_kwargs,
+    ) -> T:
+        """Loads the dialogue template from a local directory or the Huggingface Hub.
+
+        Args:
+            model_id (`str`):
+                ID of the model to load from the Huggingface Hub (e.g. `bigscience/bloom`).
+            revision (`str`, *optional*):
+                Revision of the model on the Hub. Can be a branch name, a git tag or any commit id. Defaults to the
+                latest commit on `main` branch.
+            force_download (`bool`, *optional*, defaults to `False`):
+                Whether to force (re-)downloading the model weights and configuration files from the Hub, overriding
+                the existing cache.
+            resume_download (`bool`, *optional*, defaults to `False`):
+                Whether to delete incompletely received files. Will attempt to resume the download if such a file exists.
+            proxies (`Dict[str, str]`, *optional*):
+                A dictionary of proxy servers to use by protocol or endpoint (e.g., `{'http': 'foo.bar:3128',
+                'http://hostname': 'foo.bar:4012'}`).
+            token (`str` or `bool`, *optional*):
+                The token to use as HTTP bearer authorization for remote files. By default, it will use the token
+                cached when running `huggingface-cli login`.
+            cache_dir (`str`, `Path`, *optional*):
+                Path to the folder where cached files are stored.
+            local_files_only (`bool`, *optional*, defaults to `False`):
+                If `True`, avoid downloading the file and return the path to the local cached file if it exists.
+            model_kwargs:
+                Additional keyword arguments passed along to the [`~ModelHubMixin._from_pretrained`] method.
+        """
+        if os.path.isdir(model_id):  # Can either be a local directory
+            print("Loading dialogue template from local directory")
+            template_file = os.path.join(model_id, TEMPLATE_FILENAME)
+        else:  # Or a template on the Hub
+            template_file = hf_hub_download(  # Download from the hub, passing same input args
+                repo_id=model_id,
+                filename=TEMPLATE_FILENAME,
+                revision=revision,
+                cache_dir=cache_dir,
+                force_download=force_download,
+                proxies=proxies,
+                resume_download=resume_download,
+                token=token,
+                local_files_only=local_files_only,
+            )
+
+        # Load template
+        with open(template_file, "r") as f:
+            data = json.load(f)
+        return cls.from_dict(data=data)
+
+
+# A shortened version of the system message in Anthropic's HHH prompt: https://gist.github.com/jareddk/2509330f8ef3d787fc5aaac67aab5f11#file-hhh_prompt-txt
+default_template = DialogueTemplate(
+    system="Below is a dialogue between a human user and an AI assistant. The assistant is happy to help with almost anything, and will do its best to understand exactly what is needed.",
+)
+
+# OpenAI and OpenAssistant train on few to no system messages.
+# TODO: consider defining this as the `default` template
+no_system_template = DialogueTemplate(
+    system="",
+)
+
+alpaca_template = DialogueTemplate(
+    system="Below is an instruction that describes a task. Write a response that appropriately completes the request.",
+    user_token="### Instruction:",
+    assistant_token="### Response:",
+)
+
+SUPPORTED_DIALOGUE_TEMPLATES = {
+    "default": default_template,
+    "no_system": no_system_template,
+    "alpaca": alpaca_template,
+}
+
+
+def get_dialogue_template(template: str) -> DialogueTemplate:
+    if template not in SUPPORTED_DIALOGUE_TEMPLATES.keys():
+        raise ValueError(f"Template {template} is not supported!")
+    return SUPPORTED_DIALOGUE_TEMPLATES[template].copy()
+
+
+def prepare_dialogue(example, dialogue_template, is_train=True):
+    """Format example to single- or multi-turn dialogue."""
+    # TODO: make this simpler by just ensuring every dataset has a messages column
+    if "messages" in example.keys() and example["messages"] is not None:
+        dialogue_template.messages = example["messages"]
+    elif all(k in example.keys() for k in ("prompt", "completion")):
+        # Construct single-turn dialogue from prompt and completion
+        dialogue_template.messages = [
+            {"role": "user", "content": example["prompt"]},
+            {"role": "assistant", "content": example["completion"]},
+        ]
+    elif "prompt" in example.keys():
+        # Construct single-turn dialogue from prompt (inference only)
+        dialogue_template.messages = [
+            {"role": "user", "content": example["prompt"]},
+        ]
+    else:
+        raise ValueError(
+            f"Could not format example as dialogue! Require either `messages` or `[prompt, completion]` or `[prompt]` keys but found {list(example.keys())}"
+        )
+    if is_train:
+        example["text"] = dialogue_template.get_training_prompt()
+    else:
+        example["text"] = dialogue_template.get_inference_prompt()
+    return example
+
+
+def mask_user_labels(tokenizer, dialogue_template, labels):
+    """Masks the user turns of a dialogue from the loss"""
+    user_token_id = tokenizer.convert_tokens_to_ids(dialogue_template.user_token)
+    assistant_token_id = tokenizer.convert_tokens_to_ids(dialogue_template.assistant_token)
+    for idx, label_id in enumerate(labels):
+        if label_id == user_token_id:
+            current_idx = idx
+            while labels[current_idx] != assistant_token_id and current_idx < len(labels):
+                labels[current_idx] = IGNORE_INDEX
+                current_idx += 1

requirements (15).txt

@@ -0,0 +1,2 @@
+huggingface_hub
+text-generation

share_btn (2).py

@@ -0,0 +1,111 @@
+community_icon_html = """<svg id="share-btn-share-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32">
+    <path d="M20.6081 3C21.7684 3 22.8053 3.49196 23.5284 4.38415C23.9756 4.93678 24.4428 5.82749 24.4808 7.16133C24.9674 7.01707 25.4353 6.93643 25.8725 6.93643C26.9833 6.93643 27.9865 7.37587 28.696 8.17411C29.6075 9.19872 30.0124 10.4579 29.8361 11.7177C29.7523 12.3177 29.5581 12.8555 29.2678 13.3534C29.8798 13.8646 30.3306 14.5763 30.5485 15.4322C30.719 16.1032 30.8939 17.5006 29.9808 18.9403C30.0389 19.0342 30.0934 19.1319 30.1442 19.2318C30.6932 20.3074 30.7283 21.5229 30.2439 22.6548C29.5093 24.3704 27.6841 25.7219 24.1397 27.1727C21.9347 28.0753 19.9174 28.6523 19.8994 28.6575C16.9842 29.4379 14.3477 29.8345 12.0653 29.8345C7.87017 29.8345 4.8668 28.508 3.13831 25.8921C0.356375 21.6797 0.754104 17.8269 4.35369 14.1131C6.34591 12.058 7.67023 9.02782 7.94613 8.36275C8.50224 6.39343 9.97271 4.20438 12.4172 4.20438H12.4179C12.6236 4.20438 12.8314 4.2214 13.0364 4.25468C14.107 4.42854 15.0428 5.06476 15.7115 6.02205C16.4331 5.09583 17.134 4.359 17.7682 3.94323C18.7242 3.31737 19.6794 3 20.6081 3ZM20.6081 5.95917C20.2427 5.95917 19.7963 6.1197 19.3039 6.44225C17.7754 7.44319 14.8258 12.6772 13.7458 14.7131C13.3839 15.3952 12.7655 15.6837 12.2086 15.6837C11.1036 15.6837 10.2408 14.5497 12.1076 13.1085C14.9146 10.9402 13.9299 7.39584 12.5898 7.1776C12.5311 7.16799 12.4731 7.16355 12.4172 7.16355C11.1989 7.16355 10.6615 9.33114 10.6615 9.33114C10.6615 9.33114 9.0863 13.4148 6.38031 16.206C3.67434 18.998 3.5346 21.2388 5.50675 24.2246C6.85185 26.2606 9.42666 26.8753 12.0653 26.8753C14.8021 26.8753 17.6077 26.2139 19.1799 25.793C19.2574 25.7723 28.8193 22.984 27.6081 20.6107C27.4046 20.212 27.0693 20.0522 26.6471 20.0522C24.9416 20.0522 21.8393 22.6726 20.5057 22.6726C20.2076 22.6726 19.9976 22.5416 19.9116 22.222C19.3433 20.1173 28.552 19.2325 27.7758 16.1839C27.639 15.6445 27.2677 15.4256 26.746 15.4263C24.4923 15.4263 19.4358 19.5181 18.3759 19.5181C18.2949 19.5181 18.2368 19.4937 18.2053 19.4419C17.6743 18.557 17.9653 17.9394 21.7082 15.6009C25.4511 13.2617 28.0783 11.8545 26.5841 10.1752C26.4121 9.98141 26.1684 9.8956 25.8725 9.8956C23.6001 9.89634 18.2311 14.9403 18.2311 14.9403C18.2311 14.9403 16.7821 16.496 15.9057 16.496C15.7043 16.496 15.533 16.4139 15.4169 16.2112C14.7956 15.1296 21.1879 10.1286 21.5484 8.06535C21.7928 6.66715 21.3771 5.95917 20.6081 5.95917Z" fill="#FF9D00"></path>
+    <path d="M5.50686 24.2246C3.53472 21.2387 3.67446 18.9979 6.38043 16.206C9.08641 13.4147 10.6615 9.33111 10.6615 9.33111C10.6615 9.33111 11.2499 6.95933 12.59 7.17757C13.93 7.39581 14.9139 10.9401 12.1069 13.1084C9.29997 15.276 12.6659 16.7489 13.7459 14.713C14.8258 12.6772 17.7747 7.44316 19.304 6.44221C20.8326 5.44128 21.9089 6.00204 21.5484 8.06532C21.188 10.1286 14.795 15.1295 15.4171 16.2118C16.0391 17.2934 18.2312 14.9402 18.2312 14.9402C18.2312 14.9402 25.0907 8.49588 26.5842 10.1752C28.0776 11.8545 25.4512 13.2616 21.7082 15.6008C17.9646 17.9393 17.6744 18.557 18.2054 19.4418C18.7372 20.3266 26.9998 13.1351 27.7759 16.1838C28.5513 19.2324 19.3434 20.1173 19.9117 22.2219C20.48 24.3274 26.3979 18.2382 27.6082 20.6107C28.8193 22.9839 19.2574 25.7722 19.18 25.7929C16.0914 26.62 8.24723 28.3726 5.50686 24.2246Z" fill="#FFD21E"></path>
+</svg>"""
+
+loading_icon_html = """<svg id="share-btn-loading-icon" style="display:none;" class="animate-spin"
+   style="color: #ffffff; 
+"
+   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" fill="none" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><circle style="opacity: 0.25;" cx="12" cy="12" r="10" stroke="white" stroke-width="4"></circle><path style="opacity: 0.75;" fill="white" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>"""
+
+share_js = """async () => {
+	async function uploadFile(file){
+		const UPLOAD_URL = 'https://huggingface.co/uploads';
+		const response = await fetch(UPLOAD_URL, {
+			method: 'POST',
+			headers: {
+				'Content-Type': file.type,
+				'X-Requested-With': 'XMLHttpRequest',
+			},
+			body: file, /// <- File inherits from Blob
+		});
+		const url = await response.text();
+		return url;
+	}
+
+	async function getInputImgFile(imgEl){
+        const res = await fetch(imgEl.src);
+        const blob = await res.blob();
+        const imgId = Date.now() % 200;
+        const isPng = imgEl.src.startsWith(`data:image/png`);
+        if(isPng){
+            const fileName = `sd-perception-${{imgId}}.png`;
+            return new File([blob], fileName, { type: 'image/png' });
+        }else{
+            const fileName = `sd-perception-${{imgId}}.jpg`;
+            return new File([blob], fileName, { type: 'image/jpeg' });
+        }
+	}
+
+    // const gradioEl = document.querySelector('body > gradio-app');
+    const gradioEl = document.querySelector("gradio-app");
+    const inputTxt = gradioEl.querySelector('#q-input textarea').value;
+    const outputTxt = gradioEl.querySelector('#q-output').outerHTML;
+
+    const titleLength = 150;
+    let titleTxt = inputTxt;
+    if(titleTxt.length > titleLength){
+        titleTxt = titleTxt.slice(0, titleLength) + ' ...';
+    }
+
+    const shareBtnEl = gradioEl.querySelector('#share-btn');
+    const shareIconEl = gradioEl.querySelector('#share-btn-share-icon');
+    const loadingIconEl = gradioEl.querySelector('#share-btn-loading-icon');
+
+    if(!inputTxt || !outputTxt){
+        return;
+    };
+
+    shareBtnEl.style.pointerEvents = 'none';
+    shareIconEl.style.display = 'none';
+    loadingIconEl.style.removeProperty('display');
+
+	const descriptionMd = `### Question:
+${inputTxt}
+
+### Answer:
+
+${outputTxt}`;
+
+    const params = {
+        title: titleTxt,
+        description: descriptionMd,
+    };
+
+    const paramsStr = Object.entries(params)
+        .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
+        .join('&');
+
+	window.open(`https://huggingface.co/spaces/HuggingFaceH4/star-chat-demo/discussions/new?${paramsStr}`, '_blank');
+
+    shareBtnEl.style.removeProperty('pointer-events');
+    shareIconEl.style.removeProperty('display');
+    loadingIconEl.style.display = 'none';
+}"""
+
+share_btn_css = """
+a {text-decoration-line: underline; font-weight: 600;}
+.animate-spin {
+    animation: spin 1s linear infinite;
+}
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+#share-btn-container {
+    display: flex; padding-left: 0.5rem !important; padding-right: 0.5rem !important; background-color: #000000; justify-content: center; align-items: center; border-radius: 9999px !important; width: 13rem;
+}
+#share-btn {
+    all: initial; color: #ffffff;font-weight: 600; cursor:pointer; font-family: 'IBM Plex Sans', sans-serif; margin-left: 0.5rem !important; padding-top: 0.25rem !important; padding-bottom: 0.25rem !important;
+}
+#share-btn * {
+    all: unset;
+}
+#share-btn-container div:nth-child(-n+2){
+    width: auto !important;
+    min-height: 0px !important;
+}
+#share-btn-container .wrap {
+    display: none !important;
+}
+"""