Update app.py

app.py

@@ -0,0 +1,438 @@
+import os
+import openai
+import torch
+import tensorflow as tf
+from transformers import AutoTokenizer, TFAutoModelForQuestionAnswering
+import gradio as gr
+import re
+
+# Set your OpenAI API key here temporarily for testing
+openai.api_key = os.getenv("OPENAI_API_KEY")
+
+# Check if GPU is available and use it if possible
+device = torch.device('cuda' if torch.cuda.is_available() else 'cpu')
+
+# Load the English models and tokenizers
+qa_model_name_v1 = 'salsarra/ConfliBERT-QA'
+qa_model_v1 = TFAutoModelForQuestionAnswering.from_pretrained(qa_model_name_v1)
+qa_tokenizer_v1 = AutoTokenizer.from_pretrained(qa_model_name_v1)
+
+bert_model_name_v1 = 'salsarra/BERT-base-cased-SQuAD-v1'
+bert_qa_model_v1 = TFAutoModelForQuestionAnswering.from_pretrained(bert_model_name_v1)
+bert_qa_tokenizer_v1 = AutoTokenizer.from_pretrained(bert_model_name_v1)
+
+# Load Spanish models and tokenizers
+confli_model_spanish_name = 'salsarra/ConfliBERT-Spanish-Beto-Cased-NewsQA'
+confli_model_spanish = TFAutoModelForQuestionAnswering.from_pretrained(confli_model_spanish_name)
+confli_tokenizer_spanish = AutoTokenizer.from_pretrained(confli_model_spanish_name)
+
+beto_model_spanish_name = 'salsarra/Beto-Spanish-Cased-NewsQA'
+beto_model_spanish = TFAutoModelForQuestionAnswering.from_pretrained(beto_model_spanish_name)
+beto_tokenizer_spanish = AutoTokenizer.from_pretrained(beto_model_spanish_name)
+
+# Load the additional Spanish models
+confli_sqac_model_spanish = 'salsarra/ConfliBERT-Spanish-Beto-Cased-SQAC'
+confli_sqac_model_spanish_qa = TFAutoModelForQuestionAnswering.from_pretrained(confli_sqac_model_spanish)
+confli_sqac_tokenizer_spanish = AutoTokenizer.from_pretrained(confli_sqac_model_spanish)
+
+beto_sqac_model_spanish = 'salsarra/Beto-Spanish-Cased-SQAC'
+beto_sqac_model_spanish_qa = TFAutoModelForQuestionAnswering.from_pretrained(beto_sqac_model_spanish)
+beto_sqac_tokenizer_spanish = AutoTokenizer.from_pretrained(beto_sqac_model_spanish)
+
+# Load specified ConfliBERT Arabic models
+confli_model_arabic_1_name = 'salsarra/ConfliBERT-Arabic-Arabertv2-QA-MLQA'
+confli_model_arabic_1 = TFAutoModelForQuestionAnswering.from_pretrained(confli_model_arabic_1_name)
+confli_tokenizer_arabic_1 = AutoTokenizer.from_pretrained(confli_model_arabic_1_name)
+
+confli_model_arabic_2_name = 'salsarra/ConfliBERT-Arabic-Arabertv2-QA-XQUAD'
+confli_model_arabic_2 = TFAutoModelForQuestionAnswering.from_pretrained(confli_model_arabic_2_name)
+confli_tokenizer_arabic_2 = AutoTokenizer.from_pretrained(confli_model_arabic_2_name)
+
+confli_model_arabic_3_name = 'salsarra/ConfliBERT-Arabic-Arabertv2-QA-ARCD'
+confli_model_arabic_3 = TFAutoModelForQuestionAnswering.from_pretrained(confli_model_arabic_3_name)
+confli_tokenizer_arabic_3 = AutoTokenizer.from_pretrained(confli_model_arabic_3_name)
+
+# Load specified BERT Arabic models (AraBERTv2)
+bert_model_arabic_1_name = 'salsarra/Bert-Base-Arabertv2-QA-MLQA'
+bert_qa_model_arabic_1 = TFAutoModelForQuestionAnswering.from_pretrained(bert_model_arabic_1_name)
+bert_qa_tokenizer_arabic_1 = AutoTokenizer.from_pretrained(bert_model_arabic_1_name)
+
+bert_model_arabic_2_name = 'salsarra/Bert-Base-Arabertv2-QA-XQUAD'
+bert_qa_model_arabic_2 = TFAutoModelForQuestionAnswering.from_pretrained(bert_model_arabic_2_name)
+bert_qa_tokenizer_arabic_2 = AutoTokenizer.from_pretrained(bert_model_arabic_2_name)
+
+bert_model_arabic_3_name = 'salsarra/Bert-Base-Arabertv2-QA-ARCD'
+bert_qa_model_arabic_3 = TFAutoModelForQuestionAnswering.from_pretrained(bert_model_arabic_3_name)
+bert_qa_tokenizer_arabic_3 = AutoTokenizer.from_pretrained(bert_model_arabic_3_name)
+
+
+
+# Define error handling to separate input size errors from other issues
+def handle_error_message(e, default_limit=512):
+    error_message = str(e)
+    pattern = re.compile(r"The size of tensor a \\((\\d+)\\) must match the size of tensor b \\((\\d+)\\)")
+    match = pattern.search(error_message)
+    if match:
+        number_1, number_2 = match.groups()
+        return f"<span style='color: red; font-weight: bold;'>Error: Text Input is over limit where inserted text size {number_1} is larger than model limits of {number_2}</span>"
+
+    pattern_qa = re.compile(r"indices\\[0,(\\d+)\\] = \\d+ is not in \\[0, (\\d+)\\)")
+    match_qa = pattern_qa.search(error_message)
+    if match_qa:
+        number_1, number_2 = match_qa.groups()
+        return f"<span style='color: red; font-weight: bold;'>Error: Text Input is over limit where inserted text size {number_1} is larger than model limits of {number_2}</span>"
+
+    return f"<span style='color: red; font-weight: bold;'>Error: {error_message}</span>"
+
+# Define question_answering_v1 for ConfliBERT English with truncation=True
+def question_answering_v1(context, question):
+    try:
+        inputs = qa_tokenizer_v1(question, context, return_tensors='tf', truncation=True)
+        outputs = qa_model_v1(inputs)
+        answer_start = tf.argmax(outputs.start_logits, axis=1).numpy()[0]
+        answer_end = tf.argmax(outputs.end_logits, axis=1).numpy()[0] + 1
+        answer = qa_tokenizer_v1.convert_tokens_to_string(
+            qa_tokenizer_v1.convert_ids_to_tokens(inputs['input_ids'].numpy()[0][answer_start:answer_end])
+        )
+        return f"<span style='font-weight: bold;'>{answer}</span>"
+    except Exception as e:
+        return handle_error_message(e)
+
+# Define bert_question_answering_v1 for BERT English with truncation=True
+def bert_question_answering_v1(context, question):
+    try:
+        inputs = bert_qa_tokenizer_v1(question, context, return_tensors='tf', truncation=True)
+        outputs = bert_qa_model_v1(inputs)
+        answer_start = tf.argmax(outputs.start_logits, axis=1).numpy()[0]
+        answer_end = tf.argmax(outputs.end_logits, axis=1).numpy()[0] + 1
+        answer = bert_qa_tokenizer_v1.convert_tokens_to_string(
+            bert_qa_tokenizer_v1.convert_ids_to_tokens(inputs['input_ids'].numpy()[0][answer_start:answer_end])
+        )
+        return f"<span style='font-weight: bold;'>{answer}</span>"
+    except Exception as e:
+        return handle_error_message(e)
+
+# Define question_answering_spanish for ConfliBERT-Spanish-Beto-Cased-NewsQA
+def question_answering_spanish(context, question):
+    try:
+        inputs = confli_tokenizer_spanish.encode_plus(question, context, return_tensors='tf', truncation=True)
+        outputs = confli_model_spanish(inputs)
+        answer_start = tf.argmax(outputs.start_logits, axis=1).numpy()[0]
+        answer_end = tf.argmax(outputs.end_logits, axis=1).numpy()[0] + 1
+        answer = confli_tokenizer_spanish.convert_tokens_to_string(
+            confli_tokenizer_spanish.convert_ids_to_tokens(inputs['input_ids'].numpy()[0][answer_start:answer_end])
+        )
+        return f"<span style='font-weight: bold;'>{answer}</span>"
+    except Exception as e:
+        return handle_error_message(e)
+
+# Define beto_question_answering_spanish for Beto-Spanish-Cased-NewsQA
+def beto_question_answering_spanish(context, question):
+    try:
+        inputs = beto_tokenizer_spanish.encode_plus(question, context, return_tensors='tf', truncation=True)
+        outputs = beto_model_spanish(inputs)
+        answer_start = tf.argmax(outputs.start_logits, axis=1).numpy()[0]
+        answer_end = tf.argmax(outputs.end_logits, axis=1).numpy()[0] + 1
+        answer = beto_tokenizer_spanish.convert_tokens_to_string(
+            beto_tokenizer_spanish.convert_ids_to_tokens(inputs['input_ids'].numpy()[0][answer_start:answer_end])
+        )
+        return f"<span style='font-weight: bold;'>{answer}</span>"
+    except Exception as e:
+        return handle_error_message(e)
+
+# Define confli_sqac_question_answering_spanish for ConfliBERT-Spanish-Beto-Cased-SQAC
+def confli_sqac_question_answering_spanish(context, question):
+    inputs = confli_sqac_tokenizer_spanish.encode_plus(question, context, return_tensors="tf", truncation=True)
+    outputs = confli_sqac_model_spanish_qa(inputs)
+    answer_start = tf.argmax(outputs.start_logits, axis=1).numpy()[0]
+    answer_end = tf.argmax(outputs.end_logits, axis=1).numpy()[0] + 1
+    answer = confli_sqac_tokenizer_spanish.convert_tokens_to_string(
+        confli_sqac_tokenizer_spanish.convert_ids_to_tokens(inputs['input_ids'].numpy()[0][answer_start:answer_end])
+    )
+    return f"<span style='font-weight: bold;'>{answer}</span>"
+
+# Define beto_sqac_question_answering_spanish for Beto-Spanish-Cased-SQAC
+def beto_sqac_question_answering_spanish(context, question):
+    inputs = beto_sqac_tokenizer_spanish.encode_plus(question, context, return_tensors="tf", truncation=True)
+    outputs = beto_sqac_model_spanish_qa(inputs)
+    answer_start = tf.argmax(outputs.start_logits, axis=1).numpy()[0]
+    answer_end = tf.argmax(outputs.end_logits, axis=1).numpy()[0] + 1
+    answer = beto_sqac_tokenizer_spanish.convert_tokens_to_string(
+        beto_sqac_tokenizer_spanish.convert_ids_to_tokens(inputs['input_ids'].numpy()[0][answer_start:answer_end])
+    )
+    return f"<span style='font-weight: bold;'>{answer}</span>"
+
+# ConfliBERT Arabic Model 1
+def question_answering_confli_arabic_1(context, question):
+    try:
+        inputs = confli_tokenizer_arabic_1(question, context, return_tensors='tf', truncation=True)
+        outputs = confli_model_arabic_1(inputs)
+        answer_start = tf.argmax(outputs.start_logits, axis=1).numpy()[0]
+        answer_end = tf.argmax(outputs.end_logits, axis=1).numpy()[0] + 1
+        answer = confli_tokenizer_arabic_1.convert_tokens_to_string(
+            confli_tokenizer_arabic_1.convert_ids_to_tokens(inputs['input_ids'].numpy()[0][answer_start:answer_end])
+        )
+        return f"<span style='font-weight: bold;'>{answer}</span>"
+    except Exception as e:
+        return handle_error_message(e)
+
+# Add functions for other ConfliBERT and BERT models similarly
+
+def question_answering_confli_arabic_2(context, question):
+    inputs = confli_tokenizer_arabic_2(question, context, return_tensors='tf', truncation=True)
+    outputs = confli_model_arabic_2(inputs)
+    answer_start = tf.argmax(outputs.start_logits, axis=1).numpy()[0]
+    answer_end = tf.argmax(outputs.end_logits, axis=1).numpy()[0] + 1
+    answer = confli_tokenizer_arabic_2.convert_tokens_to_string(
+        confli_tokenizer_arabic_2.convert_ids_to_tokens(inputs['input_ids'].numpy()[0][answer_start:answer_end])
+    )
+    return f"<span style='font-weight: bold;'>{answer}</span>"
+
+def question_answering_confli_arabic_3(context, question):
+    inputs = confli_tokenizer_arabic_3(question, context, return_tensors='tf', truncation=True)
+    outputs = confli_model_arabic_3(inputs)
+    answer_start = tf.argmax(outputs.start_logits, axis=1).numpy()[0]
+    answer_end = tf.argmax(outputs.end_logits, axis=1).numpy()[0] + 1
+    answer = confli_tokenizer_arabic_3.convert_tokens_to_string(
+        confli_tokenizer_arabic_3.convert_ids_to_tokens(inputs['input_ids'].numpy()[0][answer_start:answer_end])
+    )
+    return f"<span style='font-weight: bold;'>{answer}</span>"
+
+# Similarly, for BERT models
+def question_answering_bert_arabic_1(context, question):
+    inputs = bert_qa_tokenizer_arabic_1(question, context, return_tensors='tf', truncation=True)
+    outputs = bert_qa_model_arabic_1(inputs)
+    answer_start = tf.argmax(outputs.start_logits, axis=1).numpy()[0]
+    answer_end = tf.argmax(outputs.end_logits, axis=1).numpy()[0] + 1
+    answer = bert_qa_tokenizer_arabic_1.convert_tokens_to_string(
+        bert_qa_tokenizer_arabic_1.convert_ids_to_tokens(inputs['input_ids'].numpy()[0][answer_start:answer_end])
+    )
+    return f"<span style='font-weight: bold;'>{answer}</span>"
+
+# BERT Arabic Model 2 (XQUAD)
+def question_answering_bert_arabic_2(context, question):
+    try:
+        inputs = bert_qa_tokenizer_arabic_2(question, context, return_tensors='tf', truncation=True)
+        outputs = bert_qa_model_arabic_2(inputs)
+        answer_start = tf.argmax(outputs.start_logits, axis=1).numpy()[0]
+        answer_end = tf.argmax(outputs.end_logits, axis=1).numpy()[0] + 1
+        answer = bert_qa_tokenizer_arabic_2.convert_tokens_to_string(
+            bert_qa_tokenizer_arabic_2.convert_ids_to_tokens(inputs['input_ids'].numpy()[0][answer_start:answer_end])
+        )
+        return f"<span style='font-weight: bold;'>{answer}</span>"
+    except Exception as e:
+        return handle_error_message(e)
+
+# BERT Arabic Model 3 (ARCD)
+def question_answering_bert_arabic_3(context, question):
+    try:
+        inputs = bert_qa_tokenizer_arabic_3(question, context, return_tensors='tf', truncation=True)
+        outputs = bert_qa_model_arabic_3(inputs)
+        answer_start = tf.argmax(outputs.start_logits, axis=1).numpy()[0]
+        answer_end = tf.argmax(outputs.end_logits, axis=1).numpy()[0] + 1
+        answer = bert_qa_tokenizer_arabic_3.convert_tokens_to_string(
+            bert_qa_tokenizer_arabic_3.convert_ids_to_tokens(inputs['input_ids'].numpy()[0][answer_start:answer_end])
+        )
+        return f"<span style='font-weight: bold;'>{answer}</span>"
+    except Exception as e:
+        return handle_error_message(e)
+
+
+
+# Define a function to get ChatGPT's answer in English using the latest OpenAI API
+def chatgpt_question_answering(context, question):
+    messages = [
+        {"role": "system", "content": "You are a helpful assistant. Only answer based on the provided context. Do not use any external knowledge."},
+        {"role": "user", "content": f"Context: {context}\nQuestion: {question}\nAnswer:"}
+    ]
+    response = openai.ChatCompletion.create(
+        model="gpt-3.5-turbo",
+        messages=messages,
+        max_tokens=500
+    )
+    return response['choices'][0]['message']['content'].strip()
+
+# Define a function to get ChatGPT's answer in Spanish using the latest OpenAI API
+def chatgpt_question_answering_spanish(context, question):
+    messages = [
+        {"role": "system", "content": "You are a helpful assistant that responds in Spanish. Only answer based on the provided context. Do not use any external knowledge."},
+        {"role": "user", "content": f"Contexto: {context}\nPregunta: {question}\nRespuesta:"}
+    ]
+    response = openai.ChatCompletion.create(
+        model="gpt-3.5-turbo",
+        messages=messages,
+        max_tokens=500
+    )
+    return response['choices'][0]['message']['content'].strip()
+
+# Define a function to get ChatGPT's answer in Arabic using the latest OpenAI API
+def chatgpt_question_answering_arabic(context, question):
+    messages = [
+        {"role": "system", "content": "أنت مساعد ذكي ومفيد. أجب فقط بناءً على النص المُعطى في السياق. لا تستخدم أي معرفة خارجية."},
+        {"role": "user", "content": f"السياق: {context}\nالسؤال: {question}\nالإجابة:"}
+    ]
+    response = openai.ChatCompletion.create(
+        model="gpt-3.5-turbo",
+        messages=messages,
+        max_tokens=500
+    )
+    return response['choices'][0]['message']['content'].strip()
+
+
+# Main comparison function with language selection
+def compare_question_answering(language, context, question):
+    if language == "English":
+        confli_answer_v1 = question_answering_v1(context, question)
+        bert_answer_v1 = bert_question_answering_v1(context, question)
+        chatgpt_answer = chatgpt_question_answering(context, question)
+        return f"""
+        <div>
+            <h2 style='color: #2e8b57; font-weight: bold;'>Answers:</h2>
+        </div><br>
+        <div>
+            <strong style='color: green; font-weight: bold;'>ConfliBERT English:</strong><br><span style='font-weight: bold;'>{confli_answer_v1}</span></div><br>
+        <div>
+            <strong style='color: orange; font-weight: bold;'>BERT:</strong><br><span style='font-weight: bold;'>{bert_answer_v1}</span>
+        </div><br>
+        <div>
+            <strong style='color: #74AA9C; font-weight: bold;'>ChatGPT:</strong><br><span style='font-weight: bold;'>{chatgpt_answer}</span>
+        </div><br>
+        <div>
+            <strong>Model Information:</strong><br>
+            <a href='https://huggingface.co/salsarra/ConfliBERT-QA' target='_blank'>ConfliBERT English (Cont-Cased-SQuAD-v1)</a><br>
+            <a href='https://huggingface.co/salsarra/BERT-base-cased-SQuAD-v1' target='_blank'>BERT (Base-Cased-SQuAD-v1)</a><br>
+            <a href='https://platform.openai.com/docs/models/gpt-3-5' target='_blank'>ChatGPT (GPT-3.5 Turbo)</a><br></p>
+        </div>
+        """
+    elif language == "Spanish":
+        confli_answer_spanish = question_answering_spanish(context, question)
+        beto_answer_spanish = beto_question_answering_spanish(context, question)
+        confli_sqac_answer_spanish = confli_sqac_question_answering_spanish(context, question)
+        beto_sqac_answer_spanish = beto_sqac_question_answering_spanish(context, question)
+        chatgpt_answer_spanish = chatgpt_question_answering_spanish(context, question)
+        return f"""
+        <div>
+            <h2 style='color: #2e8b57; font-weight: bold;'>Answers:</h2>
+        </div><br>
+        <div>
+            <strong style='color: green; font-weight: bold;'>ConfliBERT Spanish:</strong><br><span style='font-weight: bold;'>{confli_answer_spanish}</span></div><br>
+        <div>
+            <strong style='color: orange; font-weight: bold;'>BERT Spanish (BETO):</strong><br><span style='font-weight: bold;'>{beto_answer_spanish}</span>
+        </div><br>
+        <div>
+            <strong style='color: green; font-weight: bold;'>ConfliBERT Spanish:</strong><br><span style='font-weight: bold;'>{confli_sqac_answer_spanish}</span>
+        </div><br>
+        <div>
+            <strong style='color: orange; font-weight: bold;'>BERT Spanish (BETO):</strong><br><span style='font-weight: bold;'>{beto_sqac_answer_spanish}</span>
+        </div><br>
+        <div>
+            <strong style='color: #74AA9C; font-weight: bold;'>ChatGPT:</strong><br><span style='font-weight: bold;'>{chatgpt_answer_spanish}</span>
+        </div><br>
+        <div>
+            <strong>Model Information:</strong><br>
+            <a href='https://huggingface.co/salsarra/ConfliBERT-Spanish-Beto-Cased-NewsQA' target='_blank'>ConfliBERT Spanish (Beto-Cased-NewsQA)</a><br>
+            <a href='https://huggingface.co/salsarra/Beto-Spanish-Cased-NewsQA' target='_blank'>BERT Spanish (BETO) (Beto-Spanish-Cased-NewsQA)</a><br>
+            <a href='https://huggingface.co/salsarra/ConfliBERT-Spanish-Beto-Cased-SQAC' target='_blank'>ConfliBERT Spanish (Beto-Cased-SQAC)</a><br>
+            <a href='https://huggingface.co/salsarra/Beto-Spanish-Cased-SQAC' target='_blank'>BERT Spanish (BETO) (Beto-Cased-SQAC)</a><br>
+            <a href='https://platform.openai.com/docs/models/gpt-3-5' target='_blank'>ChatGPT (GPT-3.5 Turbo)</a><br></p>
+        </div>
+        """
+    elif language == "Arabic":
+        confli_answer_arabic_1 = question_answering_confli_arabic_1(context, question)
+        bert_answer_arabic_1 = question_answering_bert_arabic_1(context, question)
+        confli_answer_arabic_2 = question_answering_confli_arabic_2(context, question)
+        bert_answer_arabic_2 = question_answering_bert_arabic_2(context, question)
+        confli_answer_arabic_3 = question_answering_confli_arabic_3(context, question)
+        bert_answer_arabic_3 = question_answering_bert_arabic_3(context, question)
+        chatgpt_answer_arabic = chatgpt_question_answering_arabic(context, question)
+
+        return f"""
+        <div dir="rtl" style="text-align: right;">
+            <h2 style='color: #2e8b57; font-weight: bold;'>الإجابات:</h2>
+        </div><br>
+        <div dir="rtl" style="text-align: right;">
+            <strong style='color: green; font-weight: bold;'>ConfliBERT Arabic (MLQA):</strong><br>
+            {confli_answer_arabic_1}
+        </div><br>
+        <div dir="rtl" style="text-align: right;">
+            <strong style='color: orange; font-weight: bold;'>BERT Arabic (MLQA):</strong><br>
+            {bert_answer_arabic_1}
+        </div><br>
+        <div dir="rtl" style="text-align: right;">
+            <strong style='color: green; font-weight: bold;'>ConfliBERT Arabic (XQUAD):</strong><br>
+            {confli_answer_arabic_2}
+        </div><br>
+        <div dir="rtl" style="text-align: right;">
+            <strong style='color: orange; font-weight: bold;'>BERT Arabic (XQUAD):</strong><br>
+            {bert_answer_arabic_2}
+        </div><br>
+        <div dir="rtl" style="text-align: right;">
+            <strong style='color: green; font-weight: bold;'>ConfliBERT Arabic (ARCD):</strong><br>
+            {confli_answer_arabic_3}
+        </div><br>
+        <div dir="rtl" style="text-align: right;">
+            <strong style='color: orange; font-weight: bold;'>BERT Arabic (ARCD):</strong><br>
+            {bert_answer_arabic_3}
+        </div><br>
+        <div dir="rtl" style="text-align: right;">
+            <strong style='color: #74AA9C; font-weight: bold;'>ChatGPT:</strong><br>
+            {chatgpt_answer_arabic}
+        </div><br>
+        <div dir="rtl" style="text-align: right;">
+            <strong>Model Information:</strong><br>
+            <a href='https://huggingface.co/salsarra/ConfliBERT-Arabic-Arabertv2-QA-MLQA' target='_blank'>ConfliBERT Arabic (MLQA)</a><br>
+            <a href='https://huggingface.co/salsarra/Bert-Base-Arabertv2-QA-MLQA' target='_blank'>BERT Arabic (MLQA)</a><br>
+            <a href='https://huggingface.co/salsarra/ConfliBERT-Arabic-Arabertv2-QA-XQUAD' target='_blank'>ConfliBERT Arabic (XQUAD)</a><br>
+            <a href='https://huggingface.co/salsarra/Bert-Base-Arabertv2-QA-XQUAD' target='_blank'>BERT Arabic (XQUAD)</a><br>
+            <a href='https://huggingface.co/salsarra/ConfliBERT-Arabic-Arabertv2-QA-ARCD' target='_blank'>ConfliBERT Arabic (ARCD)</a><br>
+            <a href='https://huggingface.co/salsarra/Bert-Base-Arabertv2-QA-ARCD' target='_blank'>BERT Arabic (ARCD)</a><br>
+            <a href='https://platform.openai.com/docs/models/gpt-3-5' target='_blank'>ChatGPT (GPT-3.5 Turbo)</a><br>
+        </div>
+        """
+
+
+
+# Gradio interface setup
+with gr.Blocks(css="""
+    body {
+        background-color: #f0f8ff;
+        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    }
+    h1, h1 a {
+        color: #2e8b57;
+        text-align: center;
+        font-size: 2em;
+        text-decoration: none;
+    }
+    h1 a:hover {
+        color: #ff8c00;
+    }
+    h2 {
+        color: #ff8c00;
+        text-align: center;
+        font-size: 1.5em;
+    }
+""") as demo:
+    
+    gr.Markdown("# [ConfliBERT-QA](https://eventdata.utdallas.edu/conflibert/)", elem_id="title")
+    gr.Markdown("Compare answers between ConfliBERT, BERT, and ChatGPT for English, and ConfliBERT, BETO, ConfliBERT-SQAC, Beto-SQAC, and ChatGPT for Spanish.")
+    
+    language = gr.Dropdown(choices=["English", "Spanish", "Arabic"], label="Select Language")
+    context = gr.Textbox(lines=5, placeholder="Enter the context here...", label="Context")
+    question = gr.Textbox(lines=2, placeholder="Enter your question here...", label="Question")
+    output = gr.HTML(label="Output")
+    
+    with gr.Row():
+        clear_btn = gr.Button("Clear")
+        submit_btn = gr.Button("Submit")
+    
+    submit_btn.click(fn=compare_question_answering, inputs=[language, context, question], outputs=output)
+    clear_btn.click(fn=lambda: ("", "", "", ""), inputs=[], outputs=[language, context, question, output])
+    
+    gr.Markdown("""
+        <div style="text-align: center; margin-top: 20px;">
+            Built by: <a href="https://www.linkedin.com/in/sultan-alsarra-phd-56977a63/" target="_blank">Sultan Alsarra</a>
+        </div>
+    """)
+
+demo.launch(share=True)