app.py

import gradio as gr
import spaces


@spaces.GPU
def _warmup():
    # Placeholder so the Space is recognized as a ZeroGPU task.
    # This portfolio page is display-only and does not really use the GPU.
    return "ok"


A = "assets/"

# Each work is an ordered list of blocks rendered top-to-bottom.
# Block types: ("md", text) | ("img", [paths]) | ("video", path)

GRIS = [
    ("md",
     "# Gris\n"
     "**Role:** Sound design · Sound synthesis · Composition · Music editing  \n"
     "**Software:** Ableton Live, Pro Tools"),
    ("video", "gris.mp4"),
    ("md",
     "### Game & chapter overview\n"
     "*Gris* is a platform-adventure game. It follows a girl named Gris who wakes before a "
     "crumbling statue of a woman. She tries to sing but soon chokes up; the statue's hand "
     "falls apart, dropping her to the colorless land below. After landing, she keeps moving "
     "forward, meeting strange structures that seem to be powered by mysterious, star-like "
     "points of light. She can collect these lights to gain new abilities — such as turning "
     "into stone, or creating new constellation-like paths."),
    ("md", "### Opening cinematic — style design"),
    ("img", [A + "gris_1.png"]),
    ("md",
     "The opening cinematic uses a synth-piano timbre from Live. This timbre gives a sense of "
     "memory, drawing the listener into the world that follows. Compositionally it uses "
     "continuous, slightly irregular rhythms with a highly repetitive melody — light and "
     "dreamlike, tinged with a touch of melancholy."),
    ("md",
     "### Chapter 2 — Anger\n"
     "The second chapter, *Anger*, is one of the emotional climaxes of the story. Tempered by "
     "repeated sandstorms, the girl gradually grows stronger and bravely faces the challenges "
     "ahead."),
    ("img", [A + "gris_2.png", A + "gris_3.png"]),
    ("md",
     "**Visual style analysis:** The visuals are dreamy and beautiful, with fairly soft "
     "colors. Chapter 2's main tone is red, adding an atmosphere of struggle and tension. Most "
     "of the time the camera sits far from the scene. The most striking shift comes as the "
     "sandstorm arrives: red smoke-clouds engulf the whole scene and visibility drops rapidly."),
    ("md",
     "**Sound style design:** The overall design holds to a *\"simple but not simplistic\"* "
     "style — it must neither break the quiet, harmonious atmosphere nor lack detail and feel "
     "crude. This remake carries more contrast than the original. In everyday traversal the "
     "style is gentler and more dreamlike, while at moments of growth — the sandstorm, or "
     "obtaining the \"box\" ability — it becomes more deeply affecting.\n\n"
     "**(1) Footsteps:** Must suit different materials. Loudness fairly low, mid and high "
     "frequencies attenuated, reverb and delay added as appropriate to match the open, distant "
     "visuals. Indoor and outdoor handling differ — indoor footsteps slightly more prominent.\n\n"
     "**(2) Ambience:** Subtle point sources woven in, such as the fine friction of sand or "
     "tiny rock/metal drops (depending on the environment). In the temple, low frequencies are "
     "moderately boosted, and point sources shift accordingly — for example bell sounds that "
     "move continuously with the player's position.\n\n"
     "**(3) Effects:** Mainly synthesis-based. Because effect sounds are often tied to "
     "\"achievement,\" they need a clear sense of positive feedback, with chorus added to "
     "create a feeling of holiness.\n\n"
     "**\\* Sandstorm:** A clear \"negative-feedback\" effect, mainly synthesis-based, richly "
     "layered — randomly synthesized notes (mimicking the texture of sand) and extremely "
     "low-frequency wind. A whisper element is inserted, like the low murmur of a demon.\n\n"
     "*Keywords: brave, vast, contrast, quiet, dreamlike, beautiful, sacred.*"),
    ("md",
     "### Depression (Chapter 4)\n"
     "*Depression* is the fourth chapter of *Gris*. Its theme color is blue, symbolizing the "
     "saddest stage. In the first half the player collects stars; after gathering six, they "
     "place them into a shell — which is actually a sea turtle, now revived. The turtle dives "
     "into the dim abyss, and the light it emits becomes a guide for the player to follow. The "
     "player then falls into the plight of being chased by an eel; after the chase they quickly "
     "ascend and swim away, and are finally rescued by the turtle, swimming toward a new area — "
     "a storyline that pushes the emotion to its climax."),
    ("img", [A + "gris_4.png"]),
    ("md",
     "**Visual style analysis:** The overall palette is dark, and brightness varies markedly "
     "with water depth. Faint light sources dot the scene, like starlight. When rescued by the "
     "turtle, the palette turns dreamlike, and the scene shifts to an open area full of glowing "
     "jellyfish."),
    ("md",
     "**Sound style design:** This section draws on ambient-music composition, using "
     "synthesizers to build multiple atmospheric layers. As the visual colors shift between "
     "light and dark, the number of layers rises or falls, giving a distinctly varied "
     "experience. The darker the scene, the more low frequency, and the more pronounced the "
     "dissonant, conflicting, ominous atmosphere; effects and timbres lean unreal and surreal.\n\n"
     "The lighting's sound design is gentler, like twinkling starlight, forming a clear "
     "contrast with the background. The turtle's appearance is where emotion erupts — but not "
     "too violently; instead the sound's mass gently expands, giving a feeling of \"sudden "
     "clarity.\" Jellyfish and bubbles have a wide sound field with delay processing, and "
     "major-key chords with an orchestral-like timbre add drama and grandeur.\n\n"
     "For the eel, the focus is the \"bite\" — the very source of conflict in the story. The "
     "eel is moderate in size but still threatening, sitting in a vast body of water, so its "
     "sound is given large reverb with appropriately boosted low frequencies."),
]

VALLEY = [
    ("md",
     "# The Valley of Ancient\n"
     "**Role:** Sound design · Sound synthesis · Wwise engineering · Part of the UE5 audio "
     "hookup  \n"
     "**Software:** Reaper, Ableton Live, Unreal Engine 5, Wwise"),
    ("video", "thevalleyofancient-002.mp4"),
    ("md", "## 1. Style design\n\n**Visual style:**"),
    ("img", [A + "valley_1.png", A + "valley_2.png"]),
    ("md",
     "The visuals split into two parts: before entering the portal, an ordinary valley scene; "
     "after entering, a dark \"Dark World\" scene. The visuals are grounded in an ancient "
     "valley with an epic, grand style, but most elements are real — only the Boss is entirely "
     "fictional. The player's ultimate mission is to overthrow the Boss, which is enormous, "
     "with red light glowing from its head and an explosive effect."),
    ("md",
     "**Sound style design:** The style should be realistic overall, adding non-realistic "
     "elements only when the story reaches specific states. Narratively, the sound should "
     "convey danger, drawing the player to immerse in this perilous environment; and since the "
     "setting is \"ancient,\" it should evoke a fairly primal atmosphere. The Boss is large "
     "with a hard body, so combat sound needs a clear sense of impact, forming a sharp "
     "contrast with the player. At the key moments of the Boss's appearance and defeat, "
     "synthesis-based ambient sounds are added to stir emotion and underscore the Boss's "
     "identity.\n\n"
     "*Time & place:* an ancient valley, fairly dry and lifeless.  \n"
     "*Emotion:* shrouded in crisis — fear alongside a firm resolve to complete the mission.  \n"
     "*Off-screen & living elements:* creatures suited to an \"ancient valley\" scene.\n\n"
     "**Sound interaction design:** When the Boss uses its fire-breathing skill, the position "
     "of the fire sound shifts accordingly as the player runs."),
    ("md",
     "## 2. Sound presentation & specifications\n\n"
     "**Sound field:** The target platform is a home-PC playback system, so only a stereo "
     "field is considered.\n\n"
     "**Ambience:**\n"
     "- *Background (BG):* fairly wide; reserves the two sides and the center of the field for "
     "3D sounds, limiting width and controlling Center.\n"
     "- *Ordinary 3D point sources:* appear in the mid/back ground, avoiding the center and "
     "both ends.\n"
     "- *Special 3D point sources:* appear at both ends of the field, with a certain height "
     "setting.\n\n"
     "**Skill & motion sounds:** mostly at the center of the field; some special effects (such "
     "as the fire-breath) change with the player's position.\n\n"
     "**Frequency response:**\n"
     "- *Ambience:* to preserve the impact of key skills, low-cut below 63Hz. The Dark World "
     "background sits around 125Hz; the ordinary environment around 200Hz. Point sources are "
     "more flexible, mainly mid-high above 500Hz, some reaching 3–5kHz.\n"
     "- *Footsteps:* characteristic band around 500Hz.\n"
     "- *Skill sounds:* wide bandwidth, emphasizing roughly 50–300Hz to strengthen impact.\n\n"
     "**Dynamic mixing:** In the two key animations — the Boss's entrance and defeat — "
     "sidechain compression is applied. As the scene switches to the dark world, the bands of "
     "wind and creature sounds descend to a degree."),
   
    ("img", [A + "valley_3.jpg", A + "valley_4.jpg", A + "valley_5.png"]),
]


def render(blocks):
    for kind, payload in blocks:
        if kind == "md":
            gr.Markdown(payload)
        elif kind == "video":
            gr.Video(payload, show_label=False)
        elif kind == "img":
            if len(payload) == 1:
                gr.Image(payload[0], show_label=False)
            else:
                gr.Gallery(payload, show_label=False, columns=len(payload),
                           height="auto", object_fit="contain")


with gr.Blocks(title="Sound Design Portfolio") as demo:
    gr.Markdown("# 🎧 Sound Design Portfolio\nTwo game sound-design projects — full design "
                "documents with the original visuals.")
    with gr.Tabs():
        with gr.Tab("Gris"):
            render(GRIS)
        with gr.Tab("The Valley of Ancient"):
            render(VALLEY)

if __name__ == "__main__":
    demo.launch(theme=gr.themes.Soft())