app.py

import gradio as gr
import random
from PIL import Image
import numpy as np
import os
import matplotlib.pyplot as plt
from io import BytesIO
import base64

# Candlestick patterns data
candlestick_patterns = [
    {
        "name": "Doji",
        "image": "doji.png",
        "signal": "neutral",
        "explanation": "A Doji forms when the opening and closing prices are virtually equal. It represents indecision in the market and can signal a potential reversal or continuation depending on previous price action."
    },
    {
        "name": "Hammer",
        "image": "hammer.png",
        "signal": "buy",
        "explanation": "The Hammer is a bullish reversal pattern that forms during a downtrend. It has a small body at the top with a long lower shadow (at least twice the size of the body). This indicates that sellers drove prices down during the session but buyers were able to push the price back up by closing."
    },
    {
        "name": "Shooting Star",
        "image": "shooting_star.png",
        "signal": "sell",
        "explanation": "The Shooting Star is a bearish reversal pattern that forms during an uptrend. It has a small body at the bottom with a long upper shadow. This signals that buyers pushed prices up during the session, but sellers took control and drove the price back down."
    },
    {
        "name": "Bullish Engulfing",
        "image": "bullish_engulfing.png",
        "signal": "buy",
        "explanation": "A Bullish Engulfing pattern forms when a small bearish candle is followed by a larger bullish candle that completely 'engulfs' the previous day's body. This indicates strong buying pressure and often signals a bullish reversal."
    },
    {
        "name": "Bearish Engulfing",
        "image": "bearish_engulfing.png",
        "signal": "sell",
        "explanation": "A Bearish Engulfing pattern forms when a small bullish candle is followed by a larger bearish candle that completely 'engulfs' the previous day's body. This indicates strong selling pressure and often signals a bearish reversal."
    },
    {
        "name": "Morning Star",
        "image": "morning_star.png",
        "signal": "buy",
        "explanation": "The Morning Star is a bullish reversal pattern consisting of three candles: a large bearish candle, followed by a small-bodied candle (star) that gaps down, followed by a large bullish candle that closes above the midpoint of the first candle. This shows a shift from selling to buying pressure."
    },
    {
        "name": "Evening Star",
        "image": "evening_star.png",
        "signal": "sell",
        "explanation": "The Evening Star is a bearish reversal pattern consisting of three candles: a large bullish candle, followed by a small-bodied candle (star) that gaps up, followed by a large bearish candle that closes below the midpoint of the first candle. This shows a shift from buying to selling pressure."
    },
    {
        "name": "Three White Soldiers",
        "image": "three_white_soldiers.png",
        "signal": "buy",
        "explanation": "The Three White Soldiers pattern consists of three consecutive bullish candles, each opening within the previous candle's body and closing above the previous candle's high. It signals strong buying pressure and often indicates a bullish reversal."
    }
]

# Generate placeholder images (since we don't have actual images)
def generate_candlestick_image(pattern_name):
    fig, ax = plt.subplots(figsize=(6, 3))
    
    # Different patterns have different appearances
    if pattern_name == "Doji":
        # Create a doji candlestick (open/close at same level)
        plt.plot([1], [50], 'ro', markersize=10)
        plt.plot([1], [30], '_', markersize=20, color='black')
        plt.plot([1], [70], '_', markersize=20, color='black')
        plt.plot([1, 1], [30, 70], 'k-')
    elif pattern_name == "Hammer":
        # Create a hammer candlestick
        plt.bar([1], [5], bottom=[45], width=0.4, color='green')
        plt.plot([1.2], [30], '_', markersize=20, color='black')
        plt.plot([1.2, 1.2], [30, 50], 'k-')
    elif pattern_name == "Shooting Star":
        # Create a shooting star candlestick
        plt.bar([1], [5], bottom=[45], width=0.4, color='red')
        plt.plot([1.2], [70], '_', markersize=20, color='black')
        plt.plot([1.2, 1.2], [50, 70], 'k-')
    elif pattern_name == "Bullish Engulfing":
        # First candle (small bearish)
        plt.bar([0.7], [5], bottom=[50], width=0.4, color='red')
        plt.plot([0.7, 0.7], [45, 55], 'k-')
        # Second candle (large bullish engulfing)
        plt.bar([1.3], [15], bottom=[40], width=0.4, color='green')
        plt.plot([1.3, 1.3], [35, 60], 'k-')
    elif pattern_name == "Bearish Engulfing":
        # First candle (small bullish)
        plt.bar([0.7], [5], bottom=[50], width=0.4, color='green')
        plt.plot([0.7, 0.7], [45, 55], 'k-')
        # Second candle (large bearish engulfing)
        plt.bar([1.3], [15], bottom=[40], width=0.4, color='red')
        plt.plot([1.3, 1.3], [35, 60], 'k-')
    elif pattern_name == "Morning Star":
        # First candle (large bearish)
        plt.bar([0.5], [10], bottom=[50], width=0.3, color='red')
        plt.plot([0.5, 0.5], [48, 62], 'k-')
        # Second candle (small doji)
        plt.bar([1], [2], bottom=[45], width=0.3, color='gray')
        plt.plot([1, 1], [44, 48], 'k-')
        # Third candle (large bullish)
        plt.bar([1.5], [10], bottom=[43], width=0.3, color='green')
        plt.plot([1.5, 1.5], [40, 55], 'k-')
    elif pattern_name == "Evening Star":
        # First candle (large bullish)
        plt.bar([0.5], [10], bottom=[45], width=0.3, color='green')
        plt.plot([0.5, 0.5], [43, 57], 'k-')
        # Second candle (small doji)
        plt.bar([1], [2], bottom=[58], width=0.3, color='gray')
        plt.plot([1, 1], [57, 61], 'k-')
        # Third candle (large bearish)
        plt.bar([1.5], [10], bottom=[45], width=0.3, color='red')
        plt.plot([1.5, 1.5], [43, 57], 'k-')
    elif pattern_name == "Three White Soldiers":
        # Three consecutive bullish candles
        plt.bar([0.5], [7], bottom=[40], width=0.3, color='green')
        plt.plot([0.5, 0.5], [38, 50], 'k-')
        plt.bar([1], [7], bottom=[47], width=0.3, color='green')
        plt.plot([1, 1], [45, 57], 'k-')
        plt.bar([1.5], [7], bottom=[54], width=0.3, color='green')
        plt.plot([1.5, 1.5], [52, 64], 'k-')
    
    plt.title(f"{pattern_name} Pattern")
    plt.xlim(0, 2)
    plt.ylim(20, 80)
    plt.axis('off')
    plt.tight_layout()
    
    # Convert plot to image
    buf = BytesIO()
    plt.savefig(buf, format='png')
    plt.close(fig)
    buf.seek(0)
    img = Image.open(buf)
    return img

# Function to generate quiz questions
def generate_questions(num_questions=10):
    questions = []
    for i in range(num_questions):
        pattern_index = i % len(candlestick_patterns)
        current_pattern = candlestick_patterns[pattern_index]
        
        # Create options (all patterns except the correct one)
        other_options = [p["name"] for p in candlestick_patterns if p["name"] != current_pattern["name"]]
        
        # Randomly select 3 incorrect options
        random.shuffle(other_options)
        shuffled_options = other_options[:3]
        
        # Add the correct answer and shuffle again
        shuffled_options.append(current_pattern["name"])
        random.shuffle(shuffled_options)
        
        questions.append({
            "pattern": current_pattern,
            "options": shuffled_options,
            "correct_answer": current_pattern["name"]
        })
    
    return questions

# Quiz state (will be managed in session state)
class QuizState:
    def __init__(self):
        self.reset()
    
    def reset(self):
        self.questions = generate_questions(10)
        self.current_question_index = 0
        self.score = 0
        self.answered = False
        self.selected_option = None
        self.is_complete = False

# Initialize quiz state
quiz_state = QuizState()

def get_current_question():
    return quiz_state.questions[quiz_state.current_question_index]

def create_interface():
    with gr.Blocks(css="""
        .container { max-width: 800px; margin: 0 auto; }
        .header { background-color: #4338ca; color: white; padding: 20px; border-radius: 10px; text-align: center; margin-bottom: 20px; }
        .quiz-container { background-color: white; border-radius: 8px; padding: 20px; margin-bottom: 20px; }
        .option { background-color: #f3f4f6; border: 2px solid #e2e8f0; border-radius: 8px; padding: 15px; margin-bottom: 10px; cursor: pointer; }
        .option:hover { background-color: #e2e8f0; }
        .correct { border-color: #10b981; background-color: rgba(16, 185, 129, 0.1); }
        .incorrect { border-color: #ef4444; background-color: rgba(239, 68, 68, 0.1); }
        .selected { border-color: #4338ca; background-color: rgba(67, 56, 202, 0.1); }
        .explanation { background-color: #f1f5f9; border-left: 4px solid #4338ca; padding: 15px; border-radius: 0 8px 8px 0; margin-bottom: 20px; }
        .signal { display: inline-block; padding: 6px 12px; border-radius: 4px; color: white; font-weight: bold; margin-bottom: 10px; }
        .buy { background-color: #10b981; }
        .sell { background-color: #ef4444; }
        .neutral { background-color: #6b7280; }
        .cash-reward { background-color: #fbbf24; color: #1f2937; padding: 10px 20px; border-radius: 8px; font-size: 24px; font-weight: bold; display: inline-block; margin: 20px 0; }
    """) as demo:
        gr.HTML("""
        <div class="header">
            <h1>Candlestick Pattern Quiz Game</h1>
            <p>Test your knowledge of candlestick patterns and earn reward points!</p>
        </div>
        """)
        
        with gr.Group(visible=True) as quiz_container:
            progress = gr.HTML(value="Question: 1/10 | Score: 0")
            
            pattern_image = gr.Image(label="Candlestick Pattern", type="pil")
            question_text = gr.Markdown("## What candlestick pattern is shown above?")
            
            with gr.Row():
                with gr.Column():
                    option1 = gr.Button(value="Option 1")
                    option2 = gr.Button(value="Option 2")
                with gr.Column():
                    option3 = gr.Button(value="Option 3")
                    option4 = gr.Button(value="Option 4")
            
            explanation_box = gr.Markdown(visible=False)
            next_button = gr.Button("Next Question", interactive=False)
        
        with gr.Group(visible=False) as results_container:
            gr.Markdown("## Quiz Complete!")
            final_score = gr.Markdown("Your final score: 0/10")
            cash_reward = gr.HTML('<div class="cash-reward">Reward: $0.00</div>')
            gr.Markdown("You've earned points that can be converted to cash rewards!")
            restart_button = gr.Button("Try Again")
        
        # Functions to update the interface
        def update_progress():
            return f"Question: {quiz_state.current_question_index + 1}/10 | Score: {quiz_state.score}"
        
        def load_question():
            if quiz_state.is_complete:
                return {
                    quiz_container: gr.update(visible=False),
                    results_container: gr.update(visible=True),
                    final_score: f"Your final score: {quiz_state.score}/10",
                    cash_reward: f'<div class="cash-reward">Reward: ${(quiz_state.score * 0.5):.2f}</div>'
                }
            
            question = get_current_question()
            img = generate_candlestick_image(question["pattern"]["name"])
            
            return {
                progress: update_progress(),
                pattern_image: img,
                option1: question["options"][0],
                option2: question["options"][1],
                option3: question["options"][2],
                option4: question["options"][3],
                explanation_box: gr.update(value="", visible=False),
                next_button: gr.update(interactive=False)
            }
        
        def select_option(option_text, btn_index):
            if quiz_state.answered:
                return {}
            
            quiz_state.selected_option = option_text
            quiz_state.answered = True
            
            question = get_current_question()
            correct = option_text == question["correct_answer"]
            
            if correct:
                quiz_state.score += 1
            
            # Prepare explanation
            pattern = question["pattern"]
            signal_class = "buy" if pattern["signal"] == "buy" else "sell" if pattern["signal"] == "sell" else "neutral"
            
            explanation_html = ""
            if correct:
                explanation_html += "### Correct! 🎉\n"
            else:
                explanation_html += f"### Incorrect\nThe correct answer is: **{question['correct_answer']}**\n"
            
            explanation_html += f"<div class='signal {signal_class}'>{pattern['signal'].upper()}</div>\n\n"
            explanation_html += pattern["explanation"]
            
            # Update button styles
            button_updates = {}
            for i, opt_text in enumerate([option1.value, option2.value, option3.value, option4.value]):
                btn_key = [option1, option2, option3, option4][i]
                if opt_text == question["correct_answer"]:
                    button_updates[btn_key] = gr.update(variant="primary", value=f"✓ {opt_text}")
                elif opt_text == option_text and not correct:
                    button_updates[btn_key] = gr.update(variant="stop", value=f"✗ {opt_text}")
            
            return {
                **button_updates,
                explanation_box: gr.update(value=explanation_html, visible=True),
                next_button: gr.update(interactive=True),
                progress: update_progress()
            }
        
        def next_question():
            quiz_state.current_question_index += 1
            quiz_state.answered = False
            quiz_state.selected_option = None
            
            if quiz_state.current_question_index >= len(quiz_state.questions):
                quiz_state.is_complete = True
            
            return load_question()
        
        def restart_quiz():
            quiz_state.reset()
            return {
                quiz_container: gr.update(visible=True),
                results_container: gr.update(visible=False),
                **load_question()
            }
        
        # Set up event handlers
        option1.click(lambda: select_option(option1.value, 0))
        option2.click(lambda: select_option(option2.value, 1))
        option3.click(lambda: select_option(option3.value, 2))
        option4.click(lambda: select_option(option4.value, 3))
        next_button.click(next_question)
        restart_button.click(restart_quiz)
        
        # Initialize the quiz
        demo.load(load_question)
    
    return demo

# Create and launch the interface
demo = create_interface()

# For Hugging Face Spaces
if __name__ == "__main__":
    demo.launch()