app.py

"""
Context Window Tetris - Gamified AI context limit visualization
A Tetris-style game that teaches about AI context windows!
"""
import gradio as gr
import random
import time

SHAPES = [
    [[1, 1, 1, 1]],  # I
    [[1, 1], [1, 1]],  # O
    [[0, 1, 0], [1, 1, 1]],  # T
    [[1, 0, 0], [1, 1, 1]],  # L
    [[0, 0, 1], [1, 1, 1]],  # J
    [[0, 1, 1], [1, 1, 0]],  # S
    [[1, 1, 0], [0, 1, 1]],  # Z
]

TOKEN_VALUES = {
    "I": 4,
    "O": 4,
    "T": 6,
    "L": 6,
    "J": 6,
    "S": 6,
    "Z": 6
}

MODEL_LIMITS = {
    "GPT-4 Turbo (128K)": 128000,
    "Claude 3 (200K)": 200000,
    "Gemini 1.5 (1M)": 1000000,
    "Llama 3.1 (128K)": 128000
}

MODEL_DISPLAY = {
    "GPT-4 Turbo (128K)": 128,
    "Claude 3 (200K)": 200,
    "Gemini 1.5 (1M)": 1000,
    "Llama 3.1 (128K)": 128
}


class TetrisGame:
    def __init__(self, model_name):
        self.model_name = model_name
        self.limit = MODEL_LIMITS[model_name]
        self.display_limit = MODEL_DISPLAY[model_name]
        self.board_width = 10
        self.board_height = 20
        self.board = [[0] * self.board_width for _ in range(self.board_height)]
        self.score = 0
        self.lines_cleared = 0
        self.tokens_used = 0
        self.game_over = False
        self.current_piece = None
        self.current_pos = [0, 0]
        self.generate_piece()

    def generate_piece(self):
        shape_idx = random.randint(0, len(SHAPES) - 1)
        self.current_piece = SHAPES[shape_idx]
        self.current_pos = [0, self.board_width // 2 - len(self.current_piece[0]) // 2]

    def rotate_piece(self):
        if self.current_piece:
            rows = len(self.current_piece)
            cols = len(self.current_piece[0])
            rotated = [[self.current_piece[rows - 1 - j][i] for j in range(rows)] for i in range(cols)]
            return rotated
        return self.current_piece

    def get_display_board(self):
        display = []
        for row in self.board:
            display_row = ""
            for cell in row:
                display_row += "██" if cell else "░░"
            display.append(display_row)
        return "\n".join(display)

    def get_stats(self):
        efficiency = (self.tokens_used / self.limit * 100) if self.limit > 0 else 0
        return {
            "score": self.score,
            "lines": self.lines_cleared,
            "tokens": self.tokens_used,
            "limit": self.display_limit,
            "efficiency": efficiency
        }

    def move_piece(self, direction):
        if direction == "left":
            self.current_pos[1] = max(0, self.current_pos[1] - 1)
        elif direction == "right":
            self.current_pos[1] = min(
                self.board_width - len(self.current_piece[0]),
                self.current_pos[1] + 1
            )

    def drop_piece(self):
        self.current_pos[0] += 1
        if self.check_collision():
            self.current_pos[0] -= 1
            self.lock_piece()
            return True
        return False

    def hard_drop(self):
        while not self.check_collision():
            self.current_pos[0] += 1
        self.current_pos[0] -= 1
        self.lock_piece()
        return True

    def check_collision(self):
        for i, row in enumerate(self.current_piece):
            for j, cell in enumerate(row):
                if cell:
                    new_x = self.current_pos[0] + i
                    new_y = self.current_pos[1] + j
                    if new_x >= self.board_height:
                        return True
                    if new_y < 0 or new_y >= self.board_width:
                        return True
                    if new_x >= 0 and self.board[new_x][new_y]:
                        return True
        return False

    def lock_piece(self):
        tokens = 0
        for i, row in enumerate(self.current_piece):
            for j, cell in enumerate(row):
                if cell:
                    x = self.current_pos[0] + i
                    y = self.current_pos[1] + j
                    if x >= 0:
                        self.board[x][y] = 1
                        tokens += 1

        self.tokens_used += TOKEN_VALUES.get(
            ["I", "O", "T", "L", "J", "S", "Z"][SHAPES.index(self.current_piece)],
            6
        )

        if self.tokens_used >= self.limit:
            self.game_over = True
            return

        self.clear_lines()
        self.generate_piece()

    def clear_lines(self):
        lines_to_clear = []
        for i, row in enumerate(self.board):
            if all(row):
                lines_to_clear.append(i)

        if lines_to_clear:
            self.lines_cleared += len(lines_to_clear)
            self.score += len(lines_to_clear) * 100 * (2 ** len(lines_to_clear))

            for line in lines_to_clear:
                del self.board[line]
                self.board.insert(0, [0] * self.board_width)


def create_game_state(model):
    return TetrisGame(model)


custom_css = """
.game-container {
    background: #1a1a2e;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
}

.board-display {
    font-family: monospace;
    font-size: 14px;
    line-height: 1.2;
    color: #00ff00;
    background: #000;
    padding: 15px;
    border-radius: 10px;
}

.stats-box {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
    border-radius: 10px;
    color: white;
    margin: 10px 0;
}

.controls {
    background: #2d3748;
    padding: 15px;
    border-radius: 10px;
    margin: 10px 0;
}

.control-btn {
    margin: 5px;
}
"""


with gr.Blocks(css=custom_css, title="Context Window Tetris") as demo:

    gr.HTML("""
    <div style="text-align: center; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 15px; margin-bottom: 20px;">
        <h1 style="color: white; font-size: 2.5em; margin: 0;">🧩 Context Window Tetris</h1>
        <p style="color: white; font-size: 1.2em;">Stack tokens before you run out of context!</p>
    </div>
    """)

    gr.Markdown("""
    ## 🎮 How to Play

    Each block represents tokens in an AI's context window. Stack them efficiently!

    | Block Type | Token Cost | Notes |
    |------------|-----------|-------|
    | I-Block | 4 tokens | Most efficient |
    | O-Block | 4 tokens | Square, easy |
    | T/L/J/S/Z | 6 tokens | Standard |

    **Controls:** ← → to move, ↑ to rotate, ↓ to drop, Space for hard drop
    """)

    with gr.Row():
        with gr.Column(scale=2):
            model_select = gr.Dropdown(
                choices=list(MODEL_LIMITS.keys()),
                value="GPT-4 Turbo (128K)",
                label="🎯 AI Model (Context Size)"
            )

            game_display = gr.Textbox(
                label="🎮 Game Board",
                lines=22,
                interactive=False,
                elem_classes="board-display"
            )

            with gr.Row():
                new_game_btn = gr.Button("🎮 New Game", variant="primary")
                move_left = gr.Button("← Left")
                rotate_btn = gr.Button("↻ Rotate")
                move_right = gr.Button("Right →")
                drop_btn = gr.Button("⬇ Drop")

        with gr.Column(scale=1):
            gr.Markdown("### 📊 Game Stats")
            stats_display = gr.JSON(label="Current Stats")

            gr.Markdown("### 🏆 High Score")
            high_score = gr.Number(value=0, interactive=False)

            gr.Markdown("""
            ### 💡 Why This Matters

            Understanding context windows helps you:
            - Write more efficient prompts
            - Optimize for cost
            - Better utilize AI capabilities
            """)

    game_state = gr.State(create_game_state("GPT-4 Turbo (128K)"))

    def new_game(model):
        return create_game_state(model)

    def update_display(state):
        return state.get_display_board(), state.get_stats()

    def move_left_fn(state):
        state.move_piece("left")
        return state, state.get_display_board(), state.get_stats()

    def move_right_fn(state):
        state.move_piece("right")
        return state, state.get_display_board(), state.get_stats()

    def rotate_fn(state):
        state.current_piece = state.rotate_piece()
        return state, state.get_display_board(), state.get_stats()

    def drop_fn(state):
        state.drop_piece()
        return state, state.get_display_board(), state.get_stats()

    # Initial display
    def init_display(state):
        return state.get_display_board(), state.get_stats()

    demo.load(
        fn=init_display,
        inputs=[game_state],
        outputs=[game_display, stats_display]
    )

    new_game_btn.click(
        fn=new_game,
        inputs=[model_select],
        outputs=[game_state]
    ).then(
        fn=init_display,
        inputs=[game_state],
        outputs=[game_display, stats_display]
    )

    model_select.change(
        fn=new_game,
        inputs=[model_select],
        outputs=[game_state]
    ).then(
        fn=init_display,
        inputs=[game_state],
        outputs=[game_display, stats_display]
    )

    move_left.click(
        fn=move_left_fn,
        inputs=[game_state],
        outputs=[game_state, game_display, stats_display]
    )

    move_right.click(
        fn=move_right_fn,
        inputs=[game_state],
        outputs=[game_state, game_display, stats_display]
    )

    rotate_btn.click(
        fn=rotate_fn,
        inputs=[game_state],
        outputs=[game_state, game_display, stats_display]
    )

    drop_btn.click(
        fn=drop_fn,
        inputs=[game_state],
        outputs=[game_state, game_display, stats_display]
    )

    gr.Markdown("""
    ---

    ### 🎯 About Context Windows

    Every AI model has a **context window** - the maximum amount of text it can process at once.

    | Model | Context Window | Relative Size |
    |-------|---------------|---------------|
    | GPT-4 Turbo | 128K tokens | 🔵🔵 |
    | Claude 3 | 200K tokens | 🔵🔵🔵 |
    | Gemini 1.5 | 1M tokens | 🔵🔵🔵🔵🔵 |
    | Llama 3.1 | 128K tokens | 🔵🔵 |

    **Fun fact:** 1M tokens ≈ 750,000 words ≈ 3 novels!

    ---

    *Built as part of HF-Master: 196 AI Projects*
    """)


if __name__ == "__main__":
    demo.launch(server_name="0.0.0.0", server_port=7860)