app.py

import streamlit as st
import matplotlib.pyplot as plt
import numpy as np

# Define the key map
KEY_MAP = {
    'C': 0, 'C#': 1, 'D': 2, 'D#': 3, 'E': 4, 'F': 5, 'F#': 6, 'G': 7, 'G#': 8, 'A': 9, 'A#': 10, 'B': 11
}

# Define the octave range
OCTAVE_RANGE = range(-1, 8)

# Define the key colors
WHITE_KEY_COLOR = 'white'
BLACK_KEY_COLOR = 'black'

# Define the key labels
KEY_LABELS = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B']

# Define the chord annotations
CHORD_ANNOTATIONS = [
    "Chord players, sing lyrics while reading music chords",
    "Pace in 12 or 3/4 steps with rhythm"
]

def draw_keyboard():
    fig, ax = plt.subplots(figsize=(16, 4))
    ax.set_facecolor('black')
    ax.set_xticks([])
    ax.set_yticks([])

    key_width = 0.8
    key_height = 3
    key_spacing = 0.2

    for octave in OCTAVE_RANGE:
        for i, key in enumerate(KEY_LABELS):
            x = (i + (octave * 12)) * (key_width + key_spacing)
            y = 0

            if i in [1, 3, 6, 8, 10]:
                rect = plt.Rectangle((x, y), key_width, key_height * 0.6, facecolor=BLACK_KEY_COLOR)
                ax.add_patch(rect)
            else:
                rect = plt.Rectangle((x, y), key_width, key_height, facecolor=WHITE_KEY_COLOR, edgecolor='black')
                ax.add_patch(rect)

                if octave >= 0:
                    ax.text(x + 0.2, 0.5, f"{key}{octave}", fontsize=12, fontweight='bold')

    for i, annotation in enumerate(CHORD_ANNOTATIONS):
        ax.text(1, key_height * (1.2 + i * 0.3), annotation, fontsize=12, fontweight='bold', color='white')

    ax.set_aspect('equal')
    st.pyplot(fig)

st.title("88-Key Keyboard Model")
draw_keyboard()