app.py

import torch
import gradio as gr
import spaces
from transformers import AutoModelForCausalLM, AutoTokenizer, TextIteratorStreamer
import os
from threading import Thread
import random
from datasets import load_dataset

HF_TOKEN = os.environ.get("HF_TOKEN", None)
MODEL_ID = "CohereForAI/c4ai-command-r7b-12-2024"
MODELS = os.environ.get("MODELS")
MODEL_NAME = MODEL_ID.split("/")[-1]

TITLE = "<h1><center>온디바이스 AI(Open LLM 모델)</center></h1>"

CSS = """
.duplicate-button {
    margin: auto !important;
    color: white !important;
    background: black !important;
    border-radius: 100vh !important;
}
h3 {
    text-align: center;
}
.chatbox .messages .message.user {
    background-color: #e1f5fe;
}
.chatbox .messages .message.bot {
    background-color: #eeeeee;
}
"""

# 모델과 토크나이저 로드
model = AutoModelForCausalLM.from_pretrained(
    MODEL_ID,
    torch_dtype=torch.bfloat16,
    device_map="auto",
)
tokenizer = AutoTokenizer.from_pretrained(MODEL_ID)

# 데이터셋 로드
dataset = load_dataset("elyza/ELYZA-tasks-100")
print(dataset)

split_name = "train" if "train" in dataset else "test"
examples_list = list(dataset[split_name])
examples = random.sample(examples_list, 50)
example_inputs = [[example['input']] for example in examples]

@spaces.GPU
def stream_chat(message: str, history: list, temperature: float, max_new_tokens: int, top_p: float, top_k: int, penalty: float):
    print(f'message is - {message}')
    print(f'history is - {history}')
    conversation = []
    for prompt, answer in history:
        conversation.extend([{"role": "user", "content": prompt}, {"role": "assistant", "content": answer}])
    conversation.append({"role": "user", "content": message})

    input_ids = tokenizer.apply_chat_template(conversation, tokenize=False, add_generation_prompt=True)
    inputs = tokenizer(input_ids, return_tensors="pt").to(0)
    
    streamer = TextIteratorStreamer(tokenizer, timeout=10., skip_prompt=True, skip_special_tokens=True)

    generate_kwargs = dict(
        inputs, 
        streamer=streamer,
        top_k=top_k,
        top_p=top_p,
        repetition_penalty=penalty,
        max_new_tokens=max_new_tokens, 
        do_sample=True, 
        temperature=temperature,
        eos_token_id=[255001],
    )
    
    thread = Thread(target=model.generate, kwargs=generate_kwargs)
    thread.start()

    buffer = ""
    for new_text in streamer:
        buffer += new_text
        yield buffer

chatbot = gr.Chatbot(height=500)

CSS = """
/* 전체 페이지 스타일링 */
body {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 메인 컨테이너 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    transform: perspective(1000px) translateZ(0);
    transition: all 0.3s ease;
}

/* 제목 스타일링 */
h1 {
    color: #2d3436;
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 2rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    transform: perspective(1000px) translateZ(20px);
}

h3 {
    text-align: center;
    color: #2d3436;
    font-size: 1.5rem;
    margin: 1rem 0;
}

/* 채팅박스 스타일링 */
.chatbox {
    background: white;
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 1rem;
    margin: 1rem 0;
    transform: translateZ(0);
    transition: all 0.3s ease;
}

/* 메시지 스타일링 */
.chatbox .messages .message.user {
    background: linear-gradient(145deg, #e1f5fe, #bbdefb);
    border-radius: 15px;
    padding: 1rem;
    margin: 0.5rem;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
    transform: translateZ(10px);
    animation: messageIn 0.3s ease-out;
}

.chatbox .messages .message.bot {
    background: linear-gradient(145deg, #f5f5f5, #eeeeee);
    border-radius: 15px;
    padding: 1rem;
    margin: 0.5rem;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
    transform: translateZ(10px);
    animation: messageIn 0.3s ease-out;
}

/* 버튼 스타일링 */
.duplicate-button {
    background: linear-gradient(145deg, #24292e, #1a1e22) !important;
    color: white !important;
    border-radius: 100vh !important;
    padding: 0.8rem 1.5rem !important;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s ease !important;
    border: none !important;
    cursor: pointer !important;
}

.duplicate-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
}

/* 입력 필드 스타일링 */
"""

with gr.Blocks(css=CSS) as demo:
    gr.HTML(TITLE)
    gr.ChatInterface(
        fn=stream_chat,
        chatbot=chatbot,
        fill_height=True,
        theme="soft",
        additional_inputs_accordion=gr.Accordion(label="⚙️ 옵션션", open=False, render=False),
        additional_inputs=[
            gr.Slider(
                minimum=0,
                maximum=1,
                step=0.1,
                value=0.8,
                label="온도",
                render=False,
            ),
            gr.Slider(
                minimum=128,
                maximum=1000000,
                step=1,
                value=100000,
                label="최대 토큰 수",
                render=False,
            ),
            gr.Slider(
                minimum=0.0,
                maximum=1.0,
                step=0.1,
                value=0.8,
                label="상위 확률",
                render=False,
            ),
            gr.Slider(
                minimum=1,
                maximum=20,
                step=1,
                value=20,
                label="상위 K",
                render=False,
            ),
            gr.Slider(
                minimum=0.0,
                maximum=2.0,
                step=0.1,
                value=1.0,
                label="반복 패널티",
                render=False,
            ),
        ],
        examples=[
            ["아이의 여름방학 과학 프로젝트를 위한 5가지 아이디어를 주세요."],
            ["마크다운을 사용하여 브레이크아웃 게임 만들기 튜토리얼을 작성해주세요."],
            ["초능력을 가진 주인공의 SF 이야기 시나리오를 작성해주세요. 복선 설정, 테마와 로그라인을 논리적으로 사용해주세요"],
            ["아이의 여름방학 자유연구를 위한 5가지 아이디어와 그 방법을 간단히 알려주세요."],
            ["퍼즐 게임 스크립트 작성을 위한 조언 부탁드립니다"],
            ["마크다운 형식으로 블록 깨기 게임 제작 교과서를 작성해주세요"],
            ["실버 川柳를 생각해주세요"],
            ["일본어 관용구, 속담에 관한 시험 문제를 만들어주세요"],
            ["도라에몽의 등장인물을 알려주세요"],
            ["오코노미야키 만드는 방법을 알려주세요"],
            ["문제 9.11과 9.9 중 어느 것이 더 큰가요? step by step으로 논리적으로 생각해주세요."],
        ],
        cache_examples=False,
    )

if __name__ == "__main__":
    demo.launch()