Upload 3 files

README.md

@@ -0,0 +1,28 @@
+# 3×3 Rubik's‑Style Color Password System (Gradio)
+
+A Hugging Face Spaces‑ready simulator. Click tiles to cycle colors in this strict order:
+
+**Red → Yellow → Green → Blue → White → Orange → (repeat)**
+
+Each of the 6 sides has a fixed center color (its "middle"). You can save a custom code (the full 3×3 pattern) per side, shuffle tiles, and try to unlock by recreating the saved pattern.
+
+## Files
+- `app.py` – the Gradio app.
+- `requirements.txt` – dependencies.
+
+## How to deploy on Hugging Face
+1. Go to **Hugging Face → New Space → Static: Gradio** (Python).
+2. Give it a name, keep defaults.
+3. Upload both files (`app.py` and `requirements.txt`) to the Space.
+4. Wait for it to build. When it’s ready, open the Space.
+
+## How to use
+1. Pick a **Side**. Its center tile is locked to the stated middle color.
+2. Click **🔀 Randomize** to shuffle the 8 non-center tiles.
+3. Arrange tiles by **clicking them** (each click cycles the color).
+4. Press **💾 Set Code** to save the current pattern for this side.
+5. Shuffle again and try to reproduce the code; hit **🔓 Unlock** to check.
+6. Use **Show Code Preview** if you want a small peek at the saved code.
+7. **♻️ Reset Side** or **🧹 Reset All** if needed.
+
+Enjoy!

app.py

@@ -0,0 +1,288 @@
+# app.py
+# 3x3 Rubik's-style Color Password System Simulator
+# Hugging Face Spaces ready (Gradio)
+#
+# How it works (quick start):
+# 1) Choose a side (each has a fixed center color).
+# 2) Click "Randomize" to shuffle the 8 non-center tiles.
+# 3) Arrange the tiles by clicking them. Each click cycles color in this exact order:
+#    Red → Yellow → Green → Blue → White → Orange → (repeat)
+#    (Center tile is locked to the side's middle color.)
+# 4) Click "Set Code" to save the current pattern as the password for that side.
+# 5) Click "Randomize" again (or leave as-is), then try to re-create the saved pattern.
+# 6) Click "Unlock" to check your attempt. Success will be announced.
+#
+# Notes:
+# - Each of the 6 sides has its own center color and its own saved code.
+# - "Show Code" lets you peek at the saved code preview for the selected side.
+# - "Reset Side" resets only the selected side (grid and saved code).
+# - "Reset All" resets everything.
+#
+# Made for users with zero coding experience—just upload these files
+# to a Hugging Face Space (Python/Gradio), and it will run.
+
+import gradio as gr
+from PIL import Image, ImageDraw
+import random
+
+# ----- Color model -----
+COLOR_ORDER = ["Red", "Yellow", "Green", "Blue", "White", "Orange"]
+COLOR_HEX = {
+    "Red":    "#e53935",
+    "Yellow": "#fdd835",
+    "Green":  "#43a047",
+    "Blue":   "#1e88e5",
+    "White":  "#fafafa",
+    "Orange": "#fb8c00",
+}
+
+# Six sides with fixed middle colors (index 4 in a 0..8 grid)
+SIDES = {
+    "Side 1 (Red middle)":    "Red",
+    "Side 2 (Green middle)":  "Green",
+    "Side 3 (Orange middle)": "Orange",
+    "Side 4 (Blue middle)":   "Blue",
+    "Side 5 (White middle)":  "White",
+    "Side 6 (Yellow middle)": "Yellow",
+}
+SIDE_NAMES = list(SIDES.keys())
+
+TILE_SIZE = 120  # px
+GRID_SIZE = 3
+IMG_SIZE = TILE_SIZE * GRID_SIZE
+
+def new_grid(center_color: str):
+    """Create a new 3x3 grid with the center locked to center_color and others random."""
+    grid = [random.choice(COLOR_ORDER) for _ in range(9)]
+    grid[4] = center_color
+    return grid
+
+def render_grid(grid):
+    """Return a PIL image of the 3x3 grid."""
+    img = Image.new("RGB", (IMG_SIZE, IMG_SIZE), color=(30, 30, 30))
+    draw = ImageDraw.Draw(img)
+    for i, color_name in enumerate(grid):
+        r = i // GRID_SIZE
+        c = i % GRID_SIZE
+        x0 = c * TILE_SIZE + 2
+        y0 = r * TILE_SIZE + 2
+        x1 = (c+1) * TILE_SIZE - 2
+        y1 = (r+1) * TILE_SIZE - 2
+        fill = COLOR_HEX[color_name]
+        draw.rectangle([x0, y0, x1, y1], fill=fill, outline="#111111", width=4)
+        # subtle "bevel" lines
+        draw.line([x0, y0, x1, y0], fill="#000000", width=3)
+        draw.line([x0, y0, x0, y1], fill="#000000", width=3)
+    return img
+
+def grid_image_bytes(grid):
+    return render_grid(grid)
+
+def cycle_color(color_name):
+    idx = COLOR_ORDER.index(color_name)
+    return COLOR_ORDER[(idx + 1) % len(COLOR_ORDER)]
+
+# ----- App State -----
+# We keep per-side state: current grid + saved code (or None)
+def init_state():
+    state = {}
+    for side, center in SIDES.items():
+        state[side] = {
+            "center": center,
+            "grid": new_grid(center),
+            "code": None,  # saved pattern (list of 9 color names) or None
+            "unlocked": False,
+        }
+    return state
+
+# ----- Helpers for events -----
+def side_to_image(state, side_name):
+    return grid_image_bytes(state[side_name]["grid"])
+
+def randomize_side(state, side_name):
+    center = state[side_name]["center"]
+    grid = state[side_name]["grid"]
+    # randomize non-center tiles only
+    for i in range(9):
+        if i == 4:
+            grid[i] = center
+        else:
+            grid[i] = random.choice(COLOR_ORDER)
+    state[side_name]["unlocked"] = False
+    return state, side_to_image(state, side_name), status_text(state, side_name), code_preview(state, side_name)
+
+def set_code(state, side_name):
+    # Save current grid as the code
+    state[side_name]["code"] = list(state[side_name]["grid"])
+    state[side_name]["unlocked"] = False
+    return state, "Code saved for this side.", code_preview(state, side_name)
+
+def unlock(state, side_name):
+    target = state[side_name]["code"]
+    if target is None:
+        return state, "No code saved yet for this side.", code_preview(state, side_name)
+    if state[side_name]["grid"] == target:
+        state[side_name]["unlocked"] = True
+        return state, "✅ Unlocked! Pattern matches the saved code.", code_preview(state, side_name)
+    else:
+        state[side_name]["unlocked"] = False
+        return state, "❌ Not yet. Keep trying!", code_preview(state, side_name)
+
+def status_text(state, side_name):
+    u = state[side_name]["unlocked"]
+    code = state[side_name]["code"]
+    if u:
+        return "Status: ✅ Unlocked"
+    if code is None:
+        return "Status: No code saved"
+    return "Status: Locked (code saved, try to match & click Unlock)"
+
+def code_preview(state, side_name):
+    """Return a small preview image for the saved code, or None if not set."""
+    code = state[side_name]["code"]
+    if code is None:
+        return None
+    # Tiny rendering
+    prev_tile = 40
+    size = prev_tile * GRID_SIZE
+    img = Image.new("RGB", (size, size), color=(30,30,30))
+    draw = ImageDraw.Draw(img)
+    for i, color_name in enumerate(code):
+        r = i // GRID_SIZE
+        c = i % GRID_SIZE
+        x0 = c * prev_tile + 2
+        y0 = r * prev_tile + 2
+        x1 = (c+1) * prev_tile - 2
+        y1 = (r+1) * prev_tile - 2
+        fill = COLOR_HEX[color_name]
+        draw.rectangle([x0, y0, x1, y1], fill=fill, outline="#111111", width=2)
+    return img
+
+def reset_side(state, side_name):
+    center = state[side_name]["center"]
+    state[side_name] = {
+        "center": center,
+        "grid": new_grid(center),
+        "code": None,
+        "unlocked": False,
+    }
+    return state, side_to_image(state, side_name), status_text(state, side_name), None
+
+def reset_all(state):
+    return init_state()
+
+# Handle tile clicks on the image: gr.Image.select gives (x, y)
+def on_click(state, side_name, evt: gr.SelectData):
+    # Determine tile from coordinates
+    x, y = evt.index[0], evt.index[1]
+    col = min(int(x // TILE_SIZE), GRID_SIZE - 1)
+    row = min(int(y // TILE_SIZE), GRID_SIZE - 1)
+    idx = row * GRID_SIZE + col
+    # Center is locked
+    if idx == 4:
+        return state, side_to_image(state, side_name)
+    # cycle color
+    grid = state[side_name]["grid"]
+    grid[idx] = cycle_color(grid[idx])
+    state[side_name]["unlocked"] = False
+    return state, side_to_image(state, side_name)
+
+# ----- Build UI -----
+with gr.Blocks(title="3x3 Rubik's-Style Color Password") as demo:
+    gr.Markdown(
+        """
+        # 3×3 Rubik's‑Style Color Password System
+        **Click tiles to cycle colors:** Red → Yellow → Green → Blue → White → Orange → (repeat).  
+        The center tile is locked to the side's middle color.
+        """
+    )
+
+    app_state = gr.State(init_state())
+
+    with gr.Row():
+        side_dropdown = gr.Dropdown(choices=SIDE_NAMES, value=SIDE_NAMES[0], label="Choose Side")
+
+    with gr.Row():
+        grid_image = gr.Image(type="pil", label="Current Grid", height=IMG_SIZE, width=IMG_SIZE, interactive=True)
+        with gr.Column():
+            status = gr.Markdown("Status: No code saved")
+            with gr.Row():
+                btn_random = gr.Button("🔀 Randomize")
+                btn_set = gr.Button("💾 Set Code")
+            with gr.Row():
+                btn_unlock = gr.Button("🔓 Unlock")
+                btn_reset_side = gr.Button("♻️ Reset Side")
+            with gr.Row():
+                btn_reset_all = gr.Button("🧹 Reset All (All Sides)")
+            show_code = gr.Checkbox(label="Show Code Preview", value=True)
+            code_image = gr.Image(type="pil", label="Saved Code (Preview)", height=120, width=120, interactive=False)
+
+    def refresh_side(state, side_name, show_code_flag):
+        # update main image, status, and code preview
+        return (
+            side_to_image(state, side_name),
+            status_text(state, side_name),
+            code_preview(state, side_name) if show_code_flag else None,
+        )
+
+    side_dropdown.change(
+        refresh_side,
+        [app_state, side_dropdown, show_code],
+        [grid_image, status, code_image],
+    )
+
+    show_code.change(
+        lambda state, side, flag: code_preview(state, side) if flag else None,
+        [app_state, side_dropdown, show_code],
+        [code_image],
+    )
+
+    btn_random.click(
+        randomize_side,
+        [app_state, side_dropdown],
+        [app_state, grid_image, status, code_image],
+    )
+
+    btn_set.click(
+        set_code,
+        [app_state, side_dropdown],
+        [app_state, gr.Textbox(visible=False), code_image],  # hidden toast text placeholder
+    )
+
+    btn_unlock.click(
+        unlock,
+        [app_state, side_dropdown],
+        [app_state, status, code_image],
+    )
+
+    btn_reset_side.click(
+        reset_side,
+        [app_state, side_dropdown],
+        [app_state, grid_image, status, code_image],
+    )
+
+    btn_reset_all.click(
+        lambda state: init_state(),
+        [app_state],
+        [app_state],
+    ).then(
+        refresh_side,
+        [app_state, side_dropdown, show_code],
+        [grid_image, status, code_image],
+    )
+
+    grid_image.select(
+        on_click,
+        [app_state, side_dropdown],
+        [app_state, grid_image],
+    )
+
+    # Initialize the first view
+    demo.load(
+        refresh_side,
+        [app_state, side_dropdown, show_code],
+        [grid_image, status, code_image],
+    )
+
+if __name__ == "__main__":
+    demo.launch()

requirements.txt

@@ -0,0 +1,2 @@
+gradio>=4.44.0
+Pillow>=10.0.0