GRADIO 챗봇에 제휴링크 걸기

Streamlit에 이어 Gradio를 이용해 AI 챗봇을 만들어 보자. Gradio는 챗봇 인터페이스를 아주 쉽고 편리하게 제공한다. 여기에 OpenAI 인공지능을 탑재하면 된다. 

 

1. Gradio 설치하기

pip install gradio

여느 파이썬 모듈과 동일하게 설치한다. 

2. 코드 작성하기

chat_history를 이용해 상담내용을 기억하고 채팅창에 띄워준다. 

import gradio as gr
from openai import OpenAI
from dotenv import load_dotenv
load_dotenv()
client = OpenAI()

with gr.Blocks() as demo:
    iframe_html = """
    <iframe src="https://ads-partners.coupang.com/widgets.html?id=765536&template=banner&trackingCode=AF7819398&subId=&width=300&height=250" width="300" height="250" frameborder="0" scrolling="no" referrerpolicy="unsafe-url" browsingtopics></iframe>
    """
    gr.HTML(iframe_html)

    chatbot = gr.Chatbot()
    msg = gr.Textbox()
    clear = gr.ClearButton([msg, chatbot])

    messages = [ 
    {"role": "system", "content": """
     당신은 연애코칭 전문가이자 심리학을 전공했습니다. 쉬운 용어를 이용해 이해하기 쉽게 상담하세요.
        규칙은 다음과 같아요.
        1. 친한 친구에게 말하듯 편안하게 상담해줘.
        2. 비슷한 사례를 들어 해결방법을 제시해줘.     
     """
     }    
]
    def respond(message, chat_history):
        messages.append({"role": "user", "content": message})
        completion = client.chat.completions.create(
            model="gpt-3.5-turbo",
            messages=messages
        )
        assistence_content = completion.choices[0].message.content 
        messages.append({"role": "assistant", "content": assistence_content})
        
        chat_history.append((message, assistence_content))
        
        return "", chat_history

    msg.submit(respond, [msg, chatbot], [msg, chatbot])

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

3. 실행

gradio 파이썬파일명

URL을 카피해 브라우저에서 실행한다. ctrl+click해도 된다. 

실행화면에서 상담을 한다. streamlit에 사용했던 chat.completion 코드를 그대로 이용할 수 있다. 일부 입/출력 파라메터만 수정해 실행하자.

3. 쿠팡 파트너스 제휴 링크 걸기

쿠팡 파트너스에서 만든 배너 광고 코드를 소스에 넣어준다. 

아래와 같이 쿠팡 파트너스 제휴 링크를 볼 수 있게 된다. 

 

 

ChatInterface를 이용해 챗봇을 만들 수도 있다. 

1.  소스 코드

화면 버튼이나 채팅창 등 코드를 작성하지 않아도 기본적인 채팅창이 만들어진다. 편리하긴 하지만 사용자 입맛에 수정하는 건 약간 복잡하다. 

chatinterface에서 사용할 함수를 정의하고 chat.completion을 동일하게 적용하자. 

import gradio as gr
from openai import OpenAI
from dotenv import load_dotenv
load_dotenv()
client = OpenAI()

messages = [ 
    {"role": "system", "content": """
     당신은 연애코칭 전문가이자 심리학을 전공했습니다. 쉬운 용어를 이용해 이해하기 쉽게 상담하세요.
        규칙은 다음과 같아요.
        1. 친한 친구에게 말하듯 편안하게 상담해줘.
        2. 비슷한 사례를 들어 해결방법을 제시해줘.     
     """
     }    
]

def random_response(message, history):
    
    messages.append({"role": "user", "content": message})
    completion = client.chat.completions.create(
        model="gpt-3.5-turbo",
        messages=messages
    )
    assistence_content = completion.choices[0].message.content 
    messages.append({"role": "assistant", "content": assistence_content})
        
    return assistence_content

demo = gr.ChatInterface(random_response,title="Gradio chatbot", description="""<a href="https://link.coupang.com/a/buCVOl" target="_blank" referrerpolicy="unsafe-url"><img src="https://ads-partners.coupang.com/banners/349814?subId=&traceId=V0-301-bae0f72e5e59e45f-I349814&w=728&h=90" alt=""></a>""")

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

2. 코드 실행

첫 번째와 동일하게 gradio 소스명으로 실행한다. 링크를 열면 채팅창이 나타난다.

챗봇 연애상담 내용을 입력하면 인공지능 사랑 상담사가 연애 코칭을 해준다. 

3. 제휴링크 걸기

역시 쿠팡 파트너스 링크를 넣을 수 있다. 다만, 특정 위치에 넣기는 어렵고 chatinterface 파라메터 중 description에 html코드를 넘겨 화면에 보이게 하는 방법을 알아보자.\

demo = gr.ChatInterface(random_response,title="Gradio chatbot", description="""<a href="https://link.coupang.com/a/buCVOl" target="_blank" referrerpolicy="unsafe-url"><img src="https://ads-partners.coupang.com/banners/349814?subId=&traceId=V0-301-bae0f72e5e59e45f-I349814&w=728&h=90" alt=""></a>""")