Ink-Wash Universe: A Developer’s Chronicle of Building a Local LLM Traditional Liuyao Divination App (FateForge) at a Hackathon

sunye

sunye-cn

Follow

build-small-hackathon

Introduction: When Large Language Models Meet 2,000-Year-Old Bamboo Scrolls

In the rapidly evolving tech landscape of 2026, the boundaries of Large Language Models (LLMs) are expanding indefinitely. As a software engineer, I have constantly found myself reflecting on a single question: What kind of creative sparks would fly when cutting-edge local AI inference technology collides with China’s oldest, most profound metaphysical philosophy—I Ching Liuyao (Six Lines) and Xiao Liuren?

Driven by this slightly audacious yet deeply romantic vision, I threw myself into this hackathon competition. Within a tight development cycle, I single-handedly managed the entire pipeline—from low-level hardware optimization and local LLM environment setup to the front-end "Song Dynasty Scholar Style" UI/UX interaction design. The ultimate fruit of this journey is my independent project: FateForge (Chronicles of Destiny).

This article serves as a comprehensive record of how I navigated the intricate pitfalls of the AMD hardware ecosystem, reshaped traditional Eastern aesthetics using code, and deeply reflected on product experience and interaction refinement during this hackathon.

Technical Architecture: Forging a Hardcore Local AI Core on AMD 780M

As a divination application centered on privacy, immediacy, and immersion, one of the core value propositions of FateForge is Local Inference. I firmly believe that a user’s inner thoughts and concerns should never be uploaded to cloud servers; divination should be an entirely private dialogue between the user and a localized miniature universe.

However, choosing this path meant I had to confront the chaotic battlefield of local hardware configuration and optimization. My development environment was a Windows 11 machine powered by an AMD Radeon 780M APU.

1. The Battle of Local Inference: Clashing with llama.cpp and Windows ROCm

For the model inference backend, I chose the renowned llama.cpp. However, setting up the ROCm and HIP environment on an AMD integrated GPU (780M) under Windows proved to be an incredibly daunting task. In the early stages of compiling and executing llama-server.exe, my console was relentlessly flooded with ROCm/HIP error logs.

• The Dynamic Between RAM and VRAM: Since it is an APU, the VRAM is shared with the system memory. To smoothly run a 7B-level model, I had to manually adjust the UMA Frame Buffer Size in the BIOS to allocate a sufficient amount of dedicated VRAM to the iGPU.
• Compute Power Adaptation: Building AMD-hardware-accelerated binaries via specific versions of llama.cpp under Windows required meticulous tuning of compilation parameters to ensure that local inference would not mindlessly fallback to pure CPU mode. After countless crashes and troubleshooting sessions, seeing the llama-server successfully load the model and process tokens felt like finally lighting the fire of a localized engine of destiny.

2. Algorithms and Prompt Engineering: Digital Mapping of Changing Lines

The core of FateForge is not a simple random number generator for drawing sticks; it rigorously reconstructs the mathematical logic of the I Ching using the "Great Expansion" method:

• The system utilizes a 2D coin-flipping simulation algorithm (replicating historical coins like Qianlong Tongbao and Kaiyuan Tongbao) to strictly calculate the four states: Young Yang, Young Yin, Old Yang, and Old Yin.
• When "Old Yang" or "Old Yin" is captured, it precisely triggers the changing line (动爻) mechanism, mapping the transition from the "Original Hexagram" (本卦) to the "Future Hexagram" (变卦).

After encapsulating this rigorous metaphysical logic, I fed it as structured context into the local LLM. Through precise Prompt Engineering, the local model shed its stiff, robotic AI tone and transformed into a gentle, insightful Song Dynasty scholar observing the world.

Design Philosophy: Deconstructing "Tian Yuan Di Fang" and Song Aesthetics with Code

For the UI/UX design, I consciously avoided the sterile, tech-centric look popular in modern LLM applications—such as the standard "history list on the left + chat box on the right" layout. FateForge instead pursues a "Scholar-style" cultural immersion. +--------------------------------------------------------+ | Top: 【Luck · Lu】 (Hexagram display, cosmic fixedness) | +--------------------------------------------------------+ | Middle: Xuan Paper Textured Card (max-height: 52vh; ) | | | | Text flows smoothly like an ancient scroll | | Line-height 1.8 for optimal breathing room | | ...LLM Interpretation Text... | | ...Action Philosophy & Mindset... | | | +--------------------------------------------------------+ | Bottom: 【Depart with a Sweep of the Sleeve】 | | (Fixed visual anchor, always accessible) | +--------------------------------------------------------+

1. Restraint and Heritage of Visual Symbols

I established a layout rooted in the traditional worldview of "Tian Yuan Di Fang" (Round Sky and Square Earth). The webpage background uses a warm, heavy, subtly textured Xuan paper hue, complemented by a central, delicate green water-ink mist gradient.

The typography of the main page went through multiple iterations. At one point, in pursuit of geometric minimalism, I attempted to compress the opening introductory text into a single line. However, I quickly realized that a single long line destroyed the rhythmic asymmetry of ancient Chinese texts. Ultimately, I returned to a two-line asymmetrical layout:

Line 1 (The number of the Great Expansion is fifty, of which forty-nine are used.) — The grand cosmic background, set in a muted dark-tea color with a smaller font size.

Line 2 (What brings you here, seeker of destiny?) — The specific inquiry, set in pure ink-black with a larger font size.

This top-heavy, non-symmetrical layout, paired with a minimal horizontal line below, elegantly narrows the visual weight from top to bottom. It creates a sense of ritual—first observing the universe, then inspecting the human heart.

2. An Obsession with Detail: From Favicon to Layout Boundaries

To ensure the entire site completely shed any modern industrial feel, I entirely reimagined the website icon (Favicon). Under the extreme constraint of a $16 \times 16$ pixel grid, I abandoned all complex graphics and designed a minimalist Yin-Yang Taiji diagram, split down the middle by an elegant S-curve using the green mist and Xuan paper hues. Using the SVG format ensured it remained perfectly sharp on Retina displays. The letter-spacing and line-height were systematically opened up to 1.8, granting the extensive generated text sufficient breathing room.

Evolution of Experience: From "Feature Stacking" to "Interaction Refinement"

In the second half of the hackathon, I encountered a classic pitfall of independent development: the bloat of initial concepts, leading to a fragmented user experience.

1. Simplifying the Journey: The Awakening of Product Thinking

Originally, I designed a cumbersome follow-up page for favorable hexagrams that featured a large "slide-to-unlock" capsule container. However, during my own testing, a wave of friction became apparent: the user had already read the comprehensive interpretation on the "Hexagram Details Page," yet they were forced to jump to a new page to read similar text, only to interact with an industrial-looking modern slider.

The essence of Eastern philosophy lies in "fluidity" and "the unity of knowledge and action." Departing gracefully after receiving your answer is the true meaning of a closing gesture.

Without hesitation, I completely cut the independent slider page, consolidating the interaction into a unified, smooth "One-Screen Flow".

2. Conquering Long Texts: The Localized Scroll Layout

Another major issue appeared when the local LLM generated responses that were too long. The text card would overflow right past the bottom of mobile screens, completely hiding the core return button out of view. This made it impossible for users to exit the page and looked incredibly cramped.

Rather than trying to rigidly limit the LLM's word count, I elegantly decoupled the layout via the front-end:

• The viewport container height was strictly locked to 100vh, and set to overflow: hidden, completely preventing global page scrolling.
• The hexagram title section at the top and the action button at the very bottom ** remain static and locked at the visual golden ratio of the screen**.
• The white card wrapping the text was given a strict maximum height limitation (max-height: 52vh) with overflow-y: auto enabled, while the modern scrollbar was completely hidden via CSS.

Consequently, the text behaves like a digital scroll within the card, flowing smoothly within the localized window. No matter how many words the model generates, the core visual center of gravity and navigational logic never break.

3. Breaking and Accepting: The Romance of Pure Code Animations

By moving away from low-quality stock images of physical jade seals, I turned to pure CSS/JS animations to convey the closing rituals for different types of omens:

• Unfavorable Hexagrams (e.g., Pi Hexagram): The system aims to deliver the positive energy of a "life-spring." The bottom of the text displays a dark ink text block: "The cosmos is in flux; seek the elusive one." The moment the user clicks, a CSS filter animation causes the text and the ominous titles to gently dissolve like smoke (filter: blur() and opacity: 0), symbolizing the seeker clearing away the fog to find a way forward.
• Favorable Hexagrams (e.g., Qian Hexagram): The bottom text reads: "The stars align; depart with a sweep of the sleeve." Clicking triggers a delicate gold ink-wash dispersion effect within the card, and the entire layout folds inward like an ancient letter using CSS 3D transforms, evaporating gracefully into the center of the screen.

Conclusion: A Lone Developer's Takeaway from the Hackathon

This hackathon journey with FateForge was not just a hardcore engineering sprint, but a deep lesson in product restraint. It made me realize that:

1. Intuition is your best product manager: The moment you personally feel an interaction is clunky or redundant, do not hesitate. Raise Occam’s razor and slice it away. A hackathon project does not need bloated features; it needs its core journey polished to perfection.
2. Deconstructing culture with technology requires reverence: Eastern aesthetics are not about carelessly slapping an ancient ink-wash image onto a background. It lives in the visual weight of two lines of text, the breathing room of line-heights, and interactions that echo the philosophy of finding opportunity within adversity.
3. The future of local AI is here: On consumer-grade hardware like the AMD 780M, by optimizing edge inference, we are fully capable of building highly performant, entirely private, and fluid niche application experiences.

The cosmos remains in flux; catch the elusive line. The path of independent development is much like casting a hexagram—unpredictable and ever-changing. But as long as you grasp that single spark of inspiration, you can sweep your sleeve and step forward to face the horizon!