import os
import tempfile

# LLM Models
from langchain_openai import ChatOpenAI
from openai import OpenAI

# Gradio
import gradio as gr

# Environment variables
from dotenv import load_dotenv

os.environ['USER_AGENT'] = 'JimYin88'
load_dotenv()

chat_model = ChatOpenAI(model="gpt-4o-mini-2024-07-18",
                        max_completion_tokens=1024,
                        api_key=os.getenv("OPENAI_API_KEY"),
                        temperature=0.3)

client = OpenAI()


def english_chinese_translation(text_input: str = 'Hi, how are you?',
                                voice: str = 'coral',
                                tone: str = 'positive',
                                speed: float = 1.0):

    response = chat_model.invoke(f"Translate the following words in English to traditional Chinese. "
                                 f"Give only the Chinese translation: {text_input}")

    audio = client.audio.speech.create(input=response.content,
                                       model="gpt-4o-mini-tts",
                                       voice=voice,
                                       instructions=f"Speak in a {tone} tone.",
                                       response_format="mp3",
                                       speed=speed)

    with tempfile.NamedTemporaryFile(delete=False, suffix=".mp3") as temp_audio_file:
        temp_audio_file.write(audio.content)
        temp_file_path = temp_audio_file.name

    return response.content, temp_file_path


interface = gr.Interface(fn=english_chinese_translation,
                         inputs=[gr.Text(value='Hi, how are you?',
                                         label="English", elem_classes="text_input", elem_id="label"),
                                 gr.Dropdown(choices=['alloy', 'ash', 'ballad', 'coral', 'echo',
                                                      'fable', 'nova', 'onyx', 'sage', 'shimmer', 'verse'],
                                             value='coral',
                                             multiselect=False,
                                             elem_classes="text_input",
                                             elem_id="textarea",
                                             label='VOICE'),
                                 gr.Text(value='positive', label='Tone', elem_classes="text-container"),
                                 gr.Slider(minimum=0.70,
                                           maximum=1.30,
                                           value=1.0,
                                           step=0.01,
                                           label="Speed",
                                           elem_classes="text_input")],
                         outputs=[gr.Text(label="中文",
                                          # interactive=False,
                                          elem_classes="text_input",
                                          elem_id="label"),
                                  gr.Audio(label="Generated Audio",
                                           type="filepath",
                                           autoplay=True,
                                           show_share_button=False)],
                         flagging_mode="never",
                         # examples=[['Hi, how are you?', 'ash', 'cheerful and positive', 1.0]],
                         #           ['Do you speak Chinese?', 'coral', 'commanding', 1.0]],
                         # live=False,
                         title='English-Chinese Translator',
                         description="""
                                     Translate English words or phrases into traditional Chinese characters,
                                     and then pronounce them in Chinese. Type in the English words or phrases.
                                     Select the voice among 11 choices. Type in the tone like e.g. 'professional',
                                     'friendly', 'cheerful', etc. Select the speed from 0.7 - 1.3. Then click on
                                     the Submit button to hear the pronunciation in Chinese.
                                     """,
                         theme=gr.themes.Base(),
                         css="""
                             .gradio-container {font-family: 'Arial';
                                                # font-size: 54px;
                                                # font-weight: normal;
                                                # text-align: left;
                                                border: 1px solid black;
                                                border-radius: 0px;
                                                background-color: lightblue}

                                textarea {font-size: 24px;
                                       font-family: 'Verdana';
                                       font-weight: normal;
                                       # color: lightblue;
                                       # color: rgb(238, 130, 238); 
                                       background-color: White;
                                       text-align: left;
                                       border: 1px solid black;
                                       border-radius: 0px
                                       }

                                button {font-size: 16px;
                                          font-family: 'Arial';
                                          font-weight: bold;
                                          # text-align: right;
                                          font-style: normal;
                                          # text-transform: uppercase;
                                          border: 1px solid black;
                                       border-radius: 0px;
                                       }

                                label {font-family: 'Arial';
                                       # font-size: 24px;
                                       font-weight: bold;
                                       text-align: center;
                                       font-style: normal;
                                       text-transform: uppercase;
                                       line-height: 1.0;
                                       letter-spacing: 2px}
                                       
                                h1 {
                                       font-size: 28px;
                                       font-family: Verdana, Arial, Sans-Serif;
                                       font-style: normal;
                                       font-weight: bold;
                                       color: black; # rgb(238, 130, 238)
                                       # background-color: yellow;
                                       # text-align: right;
                                       text-transform: normal;
                                       letter-spacing: 2px;
                                       border: 1px solid lightblue;
                                       border-radius: 0px
                                    }
                                    
                                p {
                                       font-size: 14px;
                                       font-family: Times New Roman, Times, Serif;
                                       font-style: normal;
                                       font-weight: normal;
                                       color: black; # rgb(238, 130, 238)
                                       # background-color: yellow;
                                       text-align: left;
                                       text-transform: normal;
                                       letter-spacing: 1px;
                                       border: 0px solid lightblue;
                                       border-radius: 0px
                                    }
                                    
                                div {
                                       font-size: 14px;
                                       font-family: Verdana, Arial, Sans-Serif;
                                       font-style: normal;
                                       font-weight: normal;
                                       color: black; # rgb(238, 130, 238)
                                       # background-color: yellow;
                                       text-align: center;
                                       text-transform: normal;
                                       letter-spacing: 0px;
                                       border: 1px solid lightblue;
                                       border-radius: 0px
                                    }

                            .text_input {font-family: 'Arial';
                                         # font-size: 32px;
                                         # font-weight: normal;
                                         # text-align: left;
                                         background-color: lightblue}

                                textarea {font-size: 20px;
                                          font-family: 'Verdana';
                                          font-weight: normal;
                                          # color: DodgerBlue;
                                          text-align: left}

                                label {font-family: 'Arial';
                                       # font-size: 36px;
                                       # font-weight: normal;
                                       text-align: center;
                                       font-style: normal;
                                       text-transform: uppercase;
                                       line-height: 1.0;
                                       letter-spacing: 0px;
                                       border: 1px solid black;
                                       border-radius: 0px;
                                       }
                                       
                            .text_container {font-family: 'Arial';
                                             font-size: 48px;
                                             font-weight: bold;
                                             text-align: right;
                                             font-style: italic;
                                             text-transform: uppercase;
                                             line-height: 1.0;
                                             }

                            """
                         )

interface.launch(share=False)