import gradio as gr
from sentence_transformers import SentenceTransformer, util

# Load semantic model
model = SentenceTransformer("all-MiniLM-L6-v2")

# Predefined AR/VR Q&A pairs
qa_pairs = {
    "What is Augmented Reality?": """Hello user!! 👋
Augmented Reality (AR) is a technology that enhances your perception of the real world by overlaying digital content—such as images, animations, or data—onto your physical environment. Unlike Virtual Reality, which immerses you in a completely digital space, AR blends the virtual and the real. AR is commonly experienced through smartphones, tablets, or specialized AR glasses like Microsoft HoloLens. It’s used in gaming, education, industrial training, and even mythological storytelling, where divine avatars can appear in your living room.""",
    
    "What is Virtual Reality?": """Hello user!! 👋
Virtual Reality (VR) is a fully immersive experience where users enter a computer-generated environment that replaces the real world. Using headsets like Oculus Quest, HTC Vive, or PlayStation VR, you can explore virtual spaces, interact with objects, and even engage in multiplayer experiences. VR is widely used in gaming, therapy, architectural visualization, and spiritual simulations—imagine meditating inside a virtual temple surrounded by ambient chants and glowing deities.""",
    
    "What is SLAM in AR?": """Hello user!! 👋
SLAM stands for Simultaneous Localization and Mapping. It allows a device to understand its position in space while building a map of the environment. This enables AR applications to place virtual objects accurately in your surroundings.""",
    
    "Explain foveated rendering in VR.": """Hello user!! 👋
Foveated rendering renders high-resolution graphics only in the area where the user is looking, reducing detail in peripheral vision. This improves frame rates and VR immersion.""",
    
    "What causes latency in VR systems?": """Hello user!! 👋
Latency is the delay between a user's action and the system's response. High latency can cause motion sickness. Optimizing rendering, tracking, and refresh rates reduces latency.""",
    
    "How does spatial mapping work in AR?": """Hello user!! 👋
Spatial mapping lets AR devices scan and understand the geometry of your physical environment, creating a 3D mesh to interact realistically with virtual objects.""",
    
    "What are haptics in VR?": """Hello user!! 👋
Haptics simulate touch sensations in VR via vibrations, force feedback, or pressure, making virtual interactions feel real.""",
    
    "What is occlusion in AR?": """Hello user!! 👋
Occlusion allows virtual objects to be blocked by real-world objects, creating depth and realism in AR.""",
    
    "What is the future of AR/VR?": """Hello user!! 👋
The future lies in mixed reality, spatial computing, and AI-driven experiences with hyper-personalized avatars and brain-computer interfaces.""",
    
    "What are digital twins in AR/VR?": """Hello user!! 👋
Digital twins are virtual replicas of real-world objects, used for simulation, monitoring, and predictive modeling in AR/VR."""
}

questions = list(qa_pairs.keys())
question_embeddings = model.encode(questions, convert_to_tensor=True)

def semantic_chatbot(user_input):
    input_embedding = model.encode(user_input, convert_to_tensor=True)
    scores = util.cos_sim(input_embedding, question_embeddings)[0]
    best_match_idx = scores.argmax().item()
    best_question = questions[best_match_idx]
    return qa_pairs[best_question]

sample_questions = [
    "What is Augmented Reality?",
    "What is Virtual Reality?",
    "What is SLAM in AR?",
    "Explain foveated rendering in VR.",
    "What causes latency in VR systems?",
    "How does spatial mapping work in AR?",
    "What are haptics in VR?",
    "What is occlusion in AR?",
    "What is the future of AR/VR?",
    "What are digital twins in AR/VR?"
]

css = """
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

.gradio-container {
    background:
        url('https://wallpaperaccess.com/full/2669014.jpg') no-repeat center center fixed,
        url('https://static.vecteezy.com/system/resources/previews/023/381/363/large_2x/metaverse-and-virtual-reality-network-concept-using-vr-headset-on-city-background-double-exposure-generative-ai-photo.jpg') no-repeat center center fixed;
    background-size: cover, cover;
    border-radius: 12px;
    padding: 20px;
    font-family: 'Orbitron', sans-serif;
    color: #ffffff;
}

input, textarea {
    background-color: #111;
    color: #0ff;
    border: 1px solid #0ff;
    box-shadow: 0 0 10px #0ff;
}

button {
    background-color: #222;
    color: #fff;
    border: 1px solid #0ff;
    box-shadow: 0 0 10px #0ff;
}

button:hover {
    box-shadow: 0 0 15px #ff00ff;
    transform: scale(1.05);
}

/* Animated Light Box Container */
.lightbox {
    display: inline-block;
    padding: 1em 2em;
    margin-bottom: 1em;
    border-radius: 15px;
    color: black;
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    animation: glow 2.5s ease-in-out infinite alternate;
    box-shadow:
        0 0 5px rgba(0,0,0,0.5),
        0 0 15px rgba(0,0,0,0.5),
        0 0 30px rgba(0,0,0,0.4),
        0 0 40px rgba(0,0,0,0.3);
}

/* Animated Light Box Tagline */
.lightbox-tagline {
    display: inline-block;
    padding: 0.5em 1.5em;
    border-radius: 15px;
    color: black;
    font-size: 1.2em;
    font-weight: 600;
    text-align: center;
    animation: glowTag 2.5s ease-in-out infinite alternate;
    box-shadow:
        0 0 3px rgba(0,0,0,0.5),
        0 0 10px rgba(0,0,0,0.5),
        0 0 20px rgba(0,0,0,0.4);
}

/* Glow Animation */
@keyframes glow {
    from {
        box-shadow:
          0 0 5px rgba(0,0,0,0.5),
          0 0 15px rgba(0,0,0,0.5),
          0 0 30px rgba(0,0,0,0.4),
          0 0 40px rgba(0,0,0,0.3);
        color: black;
    }
    to {
        box-shadow:
          0 0 15px rgba(0,0,0,0.7),
          0 0 30px rgba(0,0,0,0.7),
          0 0 60px rgba(0,0,0,0.6),
          0 0 80px rgba(0,0,0,0.5);
        color: black;
    }
}

@keyframes glowTag {
    from {
        box-shadow:
          0 0 3px rgba(0,0,0,0.5),
          0 0 10px rgba(0,0,0,0.5),
          0 0 20px rgba(0,0,0,0.4);
        color: black;
    }
    to {
        box-shadow:
          0 0 8px rgba(0,0,0,0.6),
          0 0 25px rgba(0,0,0,0.6),
          0 0 40px rgba(0,0,0,0.5);
        color: black;
    }
}
"""

with gr.Blocks(css=css) as demo:
    # Animated header
    gr.HTML(
        '''
        <div class="lightbox">✨ VRAssist ✨</div>
        <div class="lightbox-tagline">🔹 Experience augmented answers, virtual support 🔹</div>
        '''
    )

    # Chat input/output
    user_input = gr.Textbox(label="Your Question", placeholder="e.g. What is SLAM in AR?")
    submit_btn = gr.Button("Get Answer")
    output = gr.Textbox(label="Answer", interactive=False)
    submit_btn.click(fn=semantic_chatbot, inputs=user_input, outputs=output)

    # Sample question buttons
    gr.Markdown("### 🔍 Sample Questions")
    with gr.Row():
        for q in sample_questions:
            gr.Button(q).click(fn=semantic_chatbot, inputs=gr.State(q), outputs=output)

demo.launch()