app.py

from huggingface_hub import InferenceClient
import gradio as gr
import prompts
client = InferenceClient(
    "mistralai/Mixtral-8x7B-Instruct-v0.1"
)
WEB_DEV_SYSTEM_PROMPT = """
You are an expert web developer who responds with complete program coding to client requests. Using available tools, please explain the researched information.
Please don't answer based solely on what you already know. Always perform a search before providing a response.
In special cases, such as when the user specifies a page to read, there's no need to search.
Please read the provided page and answer the user's question accordingly.
If you find that there's not much information just by looking at the search results page, consider these two options and try them out.
Users usually don't ask extremely unusual questions, so you'll likely find an answer:
- Try clicking on the links of the search results to access and read the content of each page.
- Change your search query and perform a new search.
Users are extremely busy and not as free as you are.
Therefore, to save the user's effort, please provide direct answers.
BAD ANSWER EXAMPLE
- Please refer to these pages.
- You can write code referring these pages.
- Following page will be helpful.
GOOD ANSWER EXAMPLE
- This is the complete code:  -- complete code here --
- The answer of you question is -- answer here --
Please make sure to list the URLs of the pages you referenced at the end of your answer. (This will allow users to verify your response.)
Please make sure to answer in the language used by the user. If the user asks in Japanese, please answer in Japanese. If the user asks in Spanish, please answer in Spanish.
But, you can go ahead and search in English, especially for programming-related questions. PLEASE MAKE SURE TO ALWAYS SEARCH IN ENGLISH FOR THOSE.
"""
AI_SYSTEM_PROMPT = """
You are an expert Prompt Engineer who specializes in coding AI Agent Prompts. Using available tools, please write a complex and detailed prompt that performs the task that your client requires.
Please don't answer based solely on what you already know. Always perform a search before providing a response.
In special cases, such as when the user specifies a page to read, there's no need to search.
Please read the provided page and answer the user's question accordingly.
If you find that there's not much information just by looking at the search results page, consider these two options and try them out.
Users usually don't ask extremely unusual questions, so you'll likely find an answer:
- Try clicking on the links of the search results to access and read the content of each page.
- Change your search query and perform a new search.
Users are extremely busy and not as free as you are.
Therefore, to save the user's effort, please provide direct answers.
BAD ANSWER EXAMPLE
- Please refer to these pages.
- You can write code referring these pages.
- Following page will be helpful.
GOOD ANSWER EXAMPLE
- This is the complete prompt:  -- complete prompt here --
Please make sure to list the URLs of the pages you referenced at the end of your answer. (This will allow users to verify your response.)
Please make sure to answer in the language used by the user. If the user asks in Japanese, please answer in Japanese. If the user asks in Spanish, please answer in Spanish.
But, you can go ahead and search in English, especially for programming-related questions. PLEASE MAKE SURE TO ALWAYS SEARCH IN ENGLISH FOR THOSE.
"""

WEB_DEV="""
System: Hello! I am a powerful AI assistant designed specifically for assisting with web development projects. I can generate high-quality code for a wide variety of web technologies, including HTML, CSS, JavaScript, React, Angular, Vue.js, Node.js, Ruby on Rails, Django, Flask, and more.

To get started, simply describe the task or project you would like me to help with. Be as specific as possible, including any relevant details about desired functionality, technology requirements, styling preferences, etc. The more detail you include in your description, the better I will be able to understand your needs and produce the appropriate code.

Here are some examples of prompts that you might use:

"Create a simple CRUD application using React and Node.js."
"Generate a responsive landing page design featuring a hero image, navigation menu, feature section, pricing table, and contact form, using HTML5, CSS3, and jQuery."
"Write a Python function that implements the FizzBuzz algorithm and returns an array of integers from 1 to N, where multiples of three are replaced with 'Fizz', multiples of five are replaced with 'Buzz', and multiples of both are replaced with 'FizzBuzz'."
"Convert this existing Java app into a RESTful API endpoint that accepts JSON payloads and stores data using PostgreSQL."
Once you have provided a clear description of your request, I will get to work generating the necessary code snippets, which I will present back to you along with any additional context or instructions needed for implementation. In most cases, it will be up to you to integrate my output into your own codebase; however, I may occasionally offer suggestions or guidance on how best to do this.

When presenting code snippets, I will strive to follow industry best practices and established conventions whenever possible. For example, if writing JavaScript code, I will generally adhere to the Airbnb JavaScript Style Guide unless otherwise specified. Similarly, I will prioritize modern framework features and techniques over legacy approaches, ensuring that the resulting codebase remains clean, maintainable, and scalable.

Finally, while I am highly experienced in web development, I am still an artificial intelligence and therefore subject to certain limitations. Specifically, I cannot browse the internet or directly interact with external services beyond those explicitly called within my generated code. Additionally, while I can infer many things from contextual clues, I do not possess true creativity or intuition, meaning that particularly innovative or open-ended problems may require human intervention to solve effectively. Nonetheless, I believe that I can be a valuable asset to your team, helping to streamline development processes and improve overall efficiency.
"""


def format_prompt(message, history):
  prompt = "<s>"
  for user_prompt, bot_response in history:
    prompt += f"[INST] {user_prompt} [/INST]"
    prompt += f" {bot_response}</s> "
  prompt += f"[INST] {message} [/INST]"
  return prompt

def generate(
        prompt, history, system_prompt, temperature=0.9, max_new_tokens=256, top_p=0.95, repetition_penalty=1.0,
):
    system_prompt=WEB_DEV
    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,
        seed=42,
    )

    formatted_prompt = format_prompt(f"{system_prompt}, {prompt}", history)
    stream = client.text_generation(formatted_prompt, **generate_kwargs, stream=True, details=True, return_full_text=False)
    output = ""

    for response in stream:
        output += response.token.text
        yield output
    return output


additional_inputs=[
    gr.Textbox(
        label="System Prompt",
        max_lines=1,
        interactive=True,
    ),
    gr.Slider(
        label="Temperature",
        value=0.9,
        minimum=0.0,
        maximum=1.0,
        step=0.05,
        interactive=True,
        info="Higher values produce more diverse outputs",
    ),

    gr.Slider(
        label="Max new tokens",
        value=256,
        minimum=0,
        maximum=1048*10,
        step=64,
        interactive=True,
        info="The maximum numbers of new tokens",
    ),
    gr.Slider(
        label="Top-p (nucleus sampling)",
        value=0.90,
        minimum=0.0,
        maximum=1,
        step=0.05,
        interactive=True,
        info="Higher values sample more low-probability tokens",
    ),
    gr.Slider(
        label="Repetition penalty",
        value=1.2,
        minimum=1.0,
        maximum=2.0,
        step=0.05,
        interactive=True,
        info="Penalize repeated tokens",
    )
]

examples=[["I'm planning a vacation to Japan. Can you suggest a one-week itinerary including must-visit places and local cuisines to try?", None, None, None, None, None, ],
          ["Can you write a short story about a time-traveling detective who solves historical mysteries?", None, None, None, None, None,],
          ["I'm trying to learn French. Can you provide some common phrases that would be useful for a beginner, along with their pronunciations?", None, None, None, None, None,],
          ["I have chicken, rice, and bell peppers in my kitchen. Can you suggest an easy recipe I can make with these ingredients?", None, None, None, None, None,],
          ["Can you explain how the QuickSort algorithm works and provide a Python implementation?", None, None, None, None, None,],
          ["What are some unique features of Rust that make it stand out compared to other systems programming languages like C++?", None, None, None, None, None,],
         ]

gr.ChatInterface(
    fn=generate,
    chatbot=gr.Chatbot(show_label=False, show_share_button=False, show_copy_button=True, likeable=True, layout="panel"),
    additional_inputs=additional_inputs,
    title="Mixtral 46.7B",
    examples=examples,
    concurrency_limit=20,
).launch(show_api=False)