在之前的篇幅中，我們溝通模型都已經完成了，但這些其實還差一個UI，當然你可以自己寫，在將東西串過去，不過我這邊就介紹一個簡易方便的套件，就是Streamlit和Gradio!
我們先看Streamlit

Streamlit

Streamlit能夠直接讓你快速的生成一個WebUI，將你的模型溝通程式碼串上去!你不會碰到html/css/javascript，只需要直接寫python就可以了!
並且除了能夠用來做和模型溝通的UI,他還有很多強大的功能，像是將資料集圖表化、把一些數據化成各種圖表可視化等等，在Data Analysis, Maching Lerning上都會是很方便的工具!

這邊就馬上來實作看看吧!首先先和上一篇一樣，使用Ollama來溝通模型
記得要先下載streamlit然後把它import進來喔，一樣pip和conda都可以

pip install streamlit
conda install -c conda-forge streamlit

首先就先將模型和我們的prompt template寫出來

import streamlit as st
from langchain_community.chat_models.ollama import ChatOllama
from langchain_core.prompts import PromptTemplate

llm = ChatOllama(model="llama3")

template = """System: You are a pro gamer. Let's work this out in a step by step way to be sure we have the right answer.
Question: {question}"""

prompt_template = PromptTemplate.from_template(template)

這次我直接將system_prompt寫在裡面，若是你希望system_prompt會跟著某些事件而有差別的話，你也可以跟question一樣 拉一個變數出來操作。

接下來呼叫模型的作法會和原本的比較不一樣，我們要將它寫成一個function，這樣前端才可以讓去觸發

def chat(input):
    full_prompt = prompt_template.format(question = input)
    response = llm.invoke(full_prompt);
    return response

再來就開始寫streamlit的部分了

st.title("llm chat web")

question = st.text_input("請輸入問題: ")

if st.button("Send"):
    response = chat(question)
    st.text_area("模型的回答: ", value = response, height = 250)

這樣就可以簡單的將我們做的AI應用套上一層UI了喔！
在之前的篇幅中，我們溝通模型都已經完成了，但這些其實還差一個UI，當然你可以自己寫，在將東西串過去，不過我這邊就介紹一個簡易方便的套件，就是Streamlit和Gradio!
我們先看Streamlit

Streamlit

Streamlit能夠直接讓你快速的生成一個WebUI，將你的模型溝通程式碼串上去!你不會碰到html/css/javascript，只需要直接寫python就可以了!
並且除了能夠用來做和模型溝通的UI,他還有很多強大的功能，像是將資料集圖表化、把一些數據化成各種圖表可視化等等，在Data Analysis, Maching Lerning上都會是很方便的工具!

這邊就馬上來實作看看吧!首先先和上一篇一樣，使用Ollama來溝通模型
記得要先下載streamlit然後把它import進來喔，一樣pip和conda都可以

pip install streamlit
conda install -c conda-forge streamlit

首先就先將模型和我們的prompt template寫出來

import streamlit as st
from langchain_community.chat_models.ollama import ChatOllama
from langchain_core.prompts import PromptTemplate

llm = ChatOllama(model="llama3")

template = """System: You are a pro gamer. Let's work this out in a step by step way to be sure we have the right answer.
Question: {question}"""

prompt_template = PromptTemplate.from_template(template)

這次我直接將system_prompt寫在裡面，若是你希望system_prompt會跟著某些事件而有差別的話，你也可以跟question一樣 拉一個變數出來操作。

接下來呼叫模型的作法會和原本的比較不一樣，我們要將它寫成一個function，這樣前端才可以讓去觸發

def chat(input):
    full_prompt = prompt_template.format(question = input)
    response = llm.invoke(full_prompt);
    return response

再來就開始寫streamlit的部分了

st.title("llm chat web")

question = st.text_input("請輸入問題: ")

if st.button("Send"):
    response = chat(question)
    st.text_area("模型的回答: ", value = response, height = 250)

這樣就可以簡單的將我們做的AI應用套上一層UI了喔！