update app

src/app.py

@@ -0,0 +1,211 @@
+"""Template Demo for IBM Granite Hugging Face spaces."""
+
+from collections.abc import Iterator
+from datetime import datetime
+from pathlib import Path
+from threading import Thread
+
+import gradio as gr
+import spaces
+import torch
+from transformers import AutoModelForCausalLM, AutoTokenizer, TextIteratorStreamer
+
+from themes.research_monochrome import theme
+
+today_date = datetime.today().strftime("%B %-d, %Y")  # noqa: DTZ002
+
+SYS_PROMPT = f"""Knowledge Cutoff Date: April 2024.
+Today's Date: {today_date}.
+You are Granite, developed by IBM. You are a helpful AI assistant"""
+TITLE = "IBM Granite 3.1 8b Instruct"
+DESCRIPTION = """
+<p>Granite 3.1 8b instruct is an open-source LLM supporting a 128k context window. Start with one of the sample prompts
+or enter your own. Keep in mind that AI can occasionally make mistakes.
+<span class="gr_docs_link">
+<a href="https://www.ibm.com/granite/docs/">View Documentation <i class="fa fa-external-link"></i></a>
+</span>
+</p>
+"""
+MAX_INPUT_TOKEN_LENGTH = 128_000
+MAX_NEW_TOKENS = 1024
+TEMPERATURE = 0.7
+TOP_P = 0.85
+TOP_K = 50
+REPETITION_PENALTY = 1.05
+
+if not torch.cuda.is_available():
+    print("This demo may not work on CPU.")
+
+model = AutoModelForCausalLM.from_pretrained(
+    "ibm-granite/granite-3.1-8b-instruct", torch_dtype=torch.float16, device_map="auto"
+)
+tokenizer = AutoTokenizer.from_pretrained("ibm-granite/granite-3.1-8b-instruct")
+tokenizer.use_default_system_prompt = False
+
+
+@spaces.GPU
+def generate(
+    message: str,
+    chat_history: list[dict],
+    temperature: float = TEMPERATURE,
+    repetition_penalty: float = REPETITION_PENALTY,
+    top_p: float = TOP_P,
+    top_k: float = TOP_K,
+    max_new_tokens: int = MAX_NEW_TOKENS,
+) -> Iterator[str]:
+    """Generate function for chat demo."""
+    # Build messages
+    conversation = []
+    conversation.append({"role": "system", "content": SYS_PROMPT})
+    conversation += chat_history
+    conversation.append({"role": "user", "content": message})
+
+    # Convert messages to prompt format
+    input_ids = tokenizer.apply_chat_template(
+        conversation,
+        return_tensors="pt",
+        add_generation_prompt=True,
+        truncation=True,
+        max_length=MAX_INPUT_TOKEN_LENGTH - max_new_tokens,
+    )
+
+    input_ids = input_ids.to(model.device)
+    streamer = TextIteratorStreamer(tokenizer, skip_prompt=True, skip_special_tokens=True)
+    generate_kwargs = dict(
+        {"input_ids": input_ids},
+        streamer=streamer,
+        max_new_tokens=max_new_tokens,
+        do_sample=True,
+        top_p=top_p,
+        top_k=top_k,
+        temperature=temperature,
+        num_beams=1,
+        repetition_penalty=repetition_penalty,
+    )
+
+    t = Thread(target=model.generate, kwargs=generate_kwargs)
+    t.start()
+
+    outputs = []
+    for text in streamer:
+        outputs.append(text)
+        yield "".join(outputs)
+
+
+css_file_path = Path(Path(__file__).parent / "app.css")
+head_file_path = Path(Path(__file__).parent / "app_head.html")
+
+# advanced settings (displayed in Accordion)
+temperature_slider = gr.Slider(
+    minimum=0, maximum=1.0, value=TEMPERATURE, step=0.1, label="Temperature", elem_classes=["gr_accordion_element"]
+)
+top_p_slider = gr.Slider(
+    minimum=0, maximum=1.0, value=TOP_P, step=0.05, label="Top P", elem_classes=["gr_accordion_element"]
+)
+top_k_slider = gr.Slider(
+    minimum=0, maximum=100, value=TOP_K, step=1, label="Top K", elem_classes=["gr_accordion_element"]
+)
+repetition_penalty_slider = gr.Slider(
+    minimum=0,
+    maximum=2.0,
+    value=REPETITION_PENALTY,
+    step=0.05,
+    label="Repetition Penalty",
+    elem_classes=["gr_accordion_element"],
+)
+max_new_tokens_slider = gr.Slider(
+    minimum=1,
+    maximum=2000,
+    value=MAX_NEW_TOKENS,
+    step=1,
+    label="Max New Tokens",
+    elem_classes=["gr_accordion_element"],
+)
+chat_interface_accordion = gr.Accordion(label="Advanced Settings", open=False)
+
+with gr.Blocks(fill_height=True, css_paths=css_file_path, head_paths=head_file_path, theme=theme, title=TITLE) as demo:
+    gr.HTML(f"<h1>{TITLE}</h1>", elem_classes=["gr_title"])
+    gr.HTML(DESCRIPTION)
+    chat_interface = gr.ChatInterface(
+        fn=generate,
+        examples=[
+            ["Explain the concept of quantum computing to someone with no background in physics or computer science."],
+            ["What is OpenShift?"],
+            ["What's the importance of low latency inference?"],
+            ["Help me boost productivity habits."],
+            [
+                """Explain the following code in a concise manner:
+
+```java
+import java.util.ArrayList;
+import java.util.List;
+
+public class Main {
+
+    public static void main(String[] args) {
+        int[] arr = {1, 5, 3, 4, 2};
+        int diff = 3;
+        List<Pair> pairs = findPairs(arr, diff);
+        for (Pair pair : pairs) {
+            System.out.println(pair.x + " " + pair.y);
+        }
+    }
+
+    public static List<Pair> findPairs(int[] arr, int diff) {
+        List<Pair> pairs = new ArrayList<>();
+        for (int i = 0; i < arr.length; i++) {
+            for (int j = i + 1; j < arr.length; j++) {
+                if (Math.abs(arr[i] - arr[j]) < diff) {
+                    pairs.add(new Pair(arr[i], arr[j]));
+                }
+            }
+        }
+
+        return pairs;
+    }
+}
+
+class Pair {
+    int x;
+    int y;
+    public Pair(int x, int y) {
+        this.x = x;
+        this.y = y;
+    }
+}
+```"""
+            ],
+            [
+                """Generate a Java code block from the following explanation:
+
+The code in the Main class finds all pairs in an array whose absolute difference is less than a given value.
+
+The findPairs method takes two arguments: an array of integers and a difference value. It iterates over the array and compares each element to every other element in the array. If the absolute difference between the two elements is less than the difference value, a new Pair object is created and added to a list.
+
+The Pair class is a simple data structure that stores two integers.
+
+The main method creates an array of integers, initializes the difference value, and calls the findPairs method to find all pairs in the array. Finally, the code iterates over the list of pairs and prints each pair to the console."""  # noqa: E501
+            ],
+        ],
+        example_labels=[
+            "Explain quantum computing",
+            "What is OpenShift?",
+            "Importance of low latency inference",
+            "Boosting productivity habits",
+            "Explain and document your code",
+            "Generate Java Code",
+        ],
+        cache_examples=False,
+        type="messages",
+        additional_inputs=[
+            temperature_slider,
+            repetition_penalty_slider,
+            top_p_slider,
+            top_k_slider,
+            max_new_tokens_slider,
+        ],
+        additional_inputs_accordion=chat_interface_accordion,
+    )
+
+if __name__ == "__main__":
+    demo.queue().launch()

src/theme/carbon.py

@@ -0,0 +1,147 @@
+"""IBM Carbon theme for gradio demos.
+
+This version builds on top of the Carbon theme to make it more playful with rounded corners, a larger font family to
+enhance readability, and the IBM Cool Gray color palette for better consistency with other IBM Research demos, such as
+Bee.
+"""
+
+import gradio as gr
+from gradio.themes.utils import sizes
+
+theme = gr.themes.Base(
+    primary_hue=gr.themes.Color(
+        c100="#EDF5FF",
+        c200="#D0E2FF",
+        c300="#A6C8FF",
+        c400="#78A9FF",
+        c50="#F9F9FB",
+        c500="#4589FF",
+        c600="#0F62FE",
+        c700="#0043CE",
+        c800="#002D9C",
+        c900="#001D6C",
+        c950="#001141",
+    ),
+    secondary_hue=gr.themes.Color(
+        c100="#EDF5FF",
+        c200="#D0E2FF",
+        c300="#A6C8FF",
+        c400="#78A9FF",
+        c50="#F9F9FB",
+        c500="#4589FF",
+        c600="#0F62FE",
+        c700="#0043CE",
+        c800="#002D9C",
+        c900="#001D6C",
+        c950="#001141",
+    ),
+    neutral_hue=gr.themes.Color(
+        c100="#F2F4F8",
+        c200="#DDE1E6",
+        c300="#C1C7CD",
+        c400="#A2A9B0",
+        c50="#F9F9FB",
+        c500="#878D96",
+        c600="#697077",
+        c700="#4D5358",
+        c800="#393939",
+        c900="#21272A",
+        c950="#121619",
+    ),
+    spacing_size=sizes.spacing_md,  # change spacing to default size
+    radius_size=sizes.radius_md,  # change spacing to default size and Keep Radius to make demo feel more playful
+    text_size=sizes.text_lg,  # change fontsize to default size
+    #   spacing_size: sizes.Size | str = sizes.spacing_md,  #change spacing to default size
+    #         radius_size: sizes.Size | str = sizes.radius_md, #change spacing to default size and Keep Radius to make
+    #                                                           demo feel more playful
+    #         text_size: sizes.Size | str = sizes.text_lg, #change fontsize to default size
+    font=["IBM Plex Sans", "ui-sans-serif", "system-ui", "sans-serif"],  # update font
+    font_mono=["IBM Plex Mono", "ui-monospace", "Consolas", "monospace"],  # update font
+).set(
+    # Colors
+    background_fill_primary="*neutral_100",  # Coolgray10 background
+    background_fill_primary_dark="*neutral_950",  # Coolgray95 background for dark mode
+    slider_color="*primary_600",  # Blue60
+    slider_color_dark="*primary_500",  # Blue50
+    # Shadows
+    shadow_drop="0 1px 4px 0 rgb(0 0 0 / 0.1)",
+    shadow_drop_lg="0 2px 5px 0 rgb(0 0 0 / 0.1)",
+    # Block Labels
+    block_background_fill="white",
+    block_label_background_fill="white",  # same color as blockback gound fill
+    block_label_radius="*radius_md",
+    block_label_text_size="*text_md",
+    block_label_text_weight="600",
+    block_label_text_color="black",
+    block_label_text_color_dark="white",
+    block_title_radius="*block_label_radius",
+    block_title_background_fill="*block_label_background_fill",
+    block_title_text_weight="600",
+    block_title_text_color="black",
+    block_title_text_color_dark="white",
+    block_label_margin="*spacing_md",
+    # Inputs
+    input_background_fill="white",
+    input_background_fill_dark="*block-background-fill",
+    input_border_color="*neutral_100",
+    input_shadow="*shadow_drop",
+    input_shadow_focus="*shadow_drop_lg",
+    checkbox_shadow="none",
+    # Buttons
+    shadow_spread="6px",
+    button_primary_shadow="*shadow_drop_lg",
+    button_primary_shadow_hover="*shadow_drop_lg",
+    button_primary_shadow_active="*shadow_inset",
+    button_secondary_shadow="*shadow_drop_lg",
+    button_secondary_shadow_hover="*shadow_drop_lg",
+    button_secondary_shadow_active="*shadow_inset",
+    checkbox_label_shadow="*shadow_drop_lg",
+    button_primary_background_fill="*primary_600",
+    button_primary_background_fill_hover="*primary_500",
+    button_primary_background_fill_hover_dark="*primary_500",
+    button_primary_text_color="white",
+    button_secondary_background_fill="white",
+    button_secondary_background_fill_hover="*neutral_100",
+    button_secondary_background_fill_dark="*neutral_800",  # Secondary cool gray 80
+    button_secondary_background_fill_hover_dark="*primary_500",
+    button_secondary_text_color="*neutral_800",
+    button_cancel_background_fill="*button_secondary_background_fill",
+    button_cancel_background_fill_hover="*button_secondary_background_fill_hover",
+    button_cancel_background_fill_hover_dark="*button_secondary_background_fill_hover",
+    button_cancel_text_color="*button_secondary_text_color",
+    checkbox_label_background_fill_selected="*primary_200",
+    checkbox_label_background_fill_selected_dark="*primary_500",
+    checkbox_border_width="1px",
+    checkbox_border_color="*neutral_200",
+    checkbox_background_color_dark="*neutral_700",  # Jan 18 test to fix checkbox, radio button background color
+    checkbox_background_color_selected="*primary_600",
+    checkbox_background_color_selected_dark="*primary_500",
+    checkbox_border_color_focus="*primary_600",
+    checkbox_border_color_focus_dark="*primary_500",
+    checkbox_border_color_selected="*primary_600",
+    checkbox_border_color_selected_dark="*primary_500",
+    checkbox_label_text_color_selected="black",
+    # Borders
+    block_border_width="1px",  # test example border
+    panel_border_width="1px",
+    # Chatbubble related colors
+    # light
+    # color_accent = "*secondary_400",
+    border_color_accent_subdued="*color_accent_soft",  # chatbubble human border color, use Blue 20 as an accent color
+    color_accent_soft="*secondary_200",  # chatbubble human color
+    # darkmode
+    # chatbubble human border color in darkmode, use Blue 20 as an accent color
+    border_color_accent_subdued_dark="*secondary_500",
+    color_accent_soft_dark="*secondary_500",  # chatbubble human color in dark mode
+    # Chatbot related font
+    chatbot_text_size="*text_md",  # make it larger
+    # additional dark mode related tweaks:
+    # block_background_fill_dark="*neutral_950", # Jan 18 test coolgray95 background for dark mode
+    block_label_background_fill_dark="*neutral_800",  # same color as blockback gound fill
+    block_title_background_fill_dark="*block_label_background_fill",
+    # input_background_fill_dark="*neutral_800", #This attribute help match fill color cool gray 80 to match background
+    #                                             however cause the problem for the general theme.
+    #  input_shadow_dark="*shadow_drop", #Test if it could make the border without the color
+    # input_border_color_dark="*neutral_200",#add attribute for border Jan 18
+    checkbox_border_color_dark="*neutral_600",  # Jan 18 test to fix border
+)

src/theme/research_monochrome.py

@@ -0,0 +1,152 @@
+"""IBM Research Monochrome theme for gradio demos.
+
+This version is a variation of CarbonSoft style, where the primary button is dark gray to create monochrome style. This
+version uses the style from Research demos such as Bee to make it more playful with rounded corners, a larger font
+family to enhance readability, and the IBM Cool Gray color palette for better consistency with other IBM Research demos,
+such as Bee.
+"""
+
+import gradio as gr
+from gradio.themes.utils import sizes
+
+theme = gr.themes.Base(
+    primary_hue=gr.themes.Color(
+        c100="#EDF5FF",
+        c200="#D0E2FF",
+        c300="#A6C8FF",
+        c400="#78A9FF",
+        c50="#F9F9FB",
+        c500="#4589FF",
+        c600="#0F62FE",
+        c700="#0043CE",
+        c800="#002D9C",
+        c900="#001D6C",
+        c950="#001141",
+    ),
+    secondary_hue=gr.themes.Color(
+        c100="#EDF5FF",
+        c200="#D0E2FF",
+        c300="#A6C8FF",
+        c400="#78A9FF",
+        c50="#F9F9FB",
+        c500="#4589FF",
+        c600="#0F62FE",
+        c700="#0043CE",
+        c800="#002D9C",
+        c900="#001D6C",
+        c950="#001141",
+    ),
+    neutral_hue=gr.themes.Color(
+        c100="#F2F4F8",
+        c200="#DDE1E6",
+        c300="#C1C7CD",
+        c400="#A2A9B0",
+        c50="#F9F9FB",
+        c500="#878D96",
+        c600="#697077",
+        c700="#4D5358",
+        c800="#393939",
+        c900="#21272A",
+        c950="#121619",
+    ),
+    spacing_size=sizes.spacing_md,  # change spacing to default size
+    radius_size=sizes.radius_md,  # change spacing to default size and Keep Radius to make demo feel more playful
+    text_size=sizes.text_md,  # change fontsize to default size
+    #   spacing_size: sizes.Size | str = sizes.spacing_md,  #change spacing to default size
+    #         radius_size: sizes.Size | str = sizes.radius_md, #change spacing to default size and Keep Radius to make
+    #                                                           demo feel more playful
+    #         text_size: sizes.Size | str = sizes.text_lg, #change fontsize to default size
+    font=["IBM Plex Sans", "ui-sans-serif", "system-ui", "sans-serif"],  # update font
+    font_mono=["IBM Plex Mono", "ui-monospace", "Consolas", "monospace"],  # update font
+).set(
+    # Colors
+    background_fill_primary="*neutral_100",  # Coolgray10 background
+    background_fill_primary_dark="*neutral_950",  # Coolgray95 background for dark mode
+    # Change blue to black to create monochrome style
+    slider_color="*neutral_900",
+    slider_color_dark="*primary_500",
+    # Shadows
+    shadow_drop="0 1px 4px 0 rgb(0 0 0 / 0.1)",
+    shadow_drop_lg="0 2px 5px 0 rgb(0 0 0 / 0.1)",
+    # Block Labels
+    block_background_fill="white",
+    block_label_background_fill="white",  # same color as blockback gound fill
+    block_label_radius="*radius_md",
+    block_label_text_size="*text_md",
+    block_label_text_weight="600",
+    block_label_text_color="black",
+    block_label_text_color_dark="white",
+    block_title_radius="*block_label_radius",
+    block_title_background_fill="*block_label_background_fill",
+    block_title_text_weight="400",
+    block_title_text_color="black",
+    block_title_text_color_dark="white",
+    block_label_margin="*spacing_md",
+    # Inputs
+    input_background_fill="white",
+    input_background_fill_dark="*block-background-fill",
+    input_border_color="*neutral_100",
+    input_shadow="*shadow_drop",
+    input_shadow_dark="0 1px 4px #000",
+    input_shadow_focus="*shadow_drop_lg",
+    checkbox_shadow="none",
+    # Buttons
+    shadow_spread="6px",
+    button_primary_shadow="*shadow_drop_lg",
+    button_primary_shadow_hover="*shadow_drop_lg",
+    button_primary_shadow_active="*shadow_inset",
+    button_secondary_shadow="*shadow_drop_lg",
+    button_secondary_shadow_hover="*shadow_drop_lg",
+    button_secondary_shadow_active="*shadow_inset",
+    checkbox_label_shadow="*shadow_drop_lg",
+    # Change blue to black to create monochrome style
+    button_primary_background_fill="*neutral_900",
+    button_primary_background_fill_dark="*neutral_600",
+    button_primary_background_fill_hover="*neutral_700",
+    button_primary_background_fill_hover_dark="*primary_500",  # hover to be blue
+    button_primary_text_color="white",
+    button_secondary_background_fill="white",
+    button_secondary_background_fill_hover="*neutral_100",
+    button_secondary_background_fill_dark="*neutral_800",  # Secondary cool gray 80
+    button_secondary_background_fill_hover_dark="*primary_500",
+    button_secondary_text_color="*neutral_800",
+    button_cancel_background_fill="*button_secondary_background_fill",
+    button_cancel_background_fill_hover="*button_secondary_background_fill_hover",
+    button_cancel_background_fill_hover_dark="*button_secondary_background_fill_hover",
+    button_cancel_text_color="*button_secondary_text_color",
+    checkbox_label_background_fill_selected="*primary_200",
+    checkbox_label_background_fill_selected_dark="*primary_500",
+    checkbox_border_width="1px",
+    checkbox_border_color="*neutral_200",
+    checkbox_background_color_dark="*neutral_700",  # Jan 18 test to fix checkbox, radio button background color
+    checkbox_background_color_selected="*primary_600",
+    checkbox_background_color_selected_dark="*primary_500",
+    checkbox_border_color_focus="*primary_600",
+    checkbox_border_color_focus_dark="*primary_500",
+    checkbox_border_color_selected="*primary_600",
+    checkbox_border_color_selected_dark="*primary_500",
+    checkbox_label_text_color_selected="black",
+    # Borders
+    block_border_width="1px",  # test example border
+    panel_border_width="1px",
+    # Chatbubble related colors
+    # light
+    # color_accent = "*secondary_400",
+    border_color_accent_subdued="*color_accent_soft",  # chatbubble human border color, use Blue 20 as an accent color
+    color_accent_soft="*secondary_200",  # chatbubble human color
+    # darkmode
+    # chatbubble human border color in darkmode, use Blue 20 as an accent color
+    border_color_accent_subdued_dark="*secondary_500",
+    color_accent_soft_dark="*secondary_500",  # chatbubble human color in dark mode
+    # Chatbot related font
+    chatbot_text_size="*text_md",  # make it larger
+    # additional dark mode related tweaks:
+    # block_background_fill_dark="*neutral_950", # Jan 18 test coolgray95 background for dark mode
+    block_label_background_fill_dark="*neutral_800",  # same color as blockback gound fill
+    block_title_background_fill_dark="*block_label_background_fill",
+    # input_background_fill_dark="*neutral_800", #This attribute help match fill color cool gray 80 to match background
+    #                                             however cause the problem for the general theme.
+    #  input_shadow_dark="*shadow_drop", #Test if it could make the border without the color
+    # input_border_color_dark="*neutral_200",#add attribute for border Jan 18
+    checkbox_border_color_dark="*neutral_600",  # Jan 18 test to fix border
+)