docs: add architecture diagram for DevPost submission (#123)

[ComBba]

Summary

• Generate architecture diagram as docs/architecture.png using Mermaid
• Include source docs/architecture.mmd for future updates
• Shows: Browser → Go Backend → Gemini API + Google Cloud services
• All labels in English for judge readability

Issue

Closes #123

Local CI

• Documentation-only change, no code modifications

Test plan

• View docs/architecture.png in GitHub to verify rendering
• Referenced by README.md image tag: <img src="docs/architecture.png">

🤖 Generated with Claude Code

[gemini-code-assist]

Summary of Changes

Hello @ComBba, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces comprehensive architectural documentation for the project, primarily for a DevPost submission. It provides a clear visual representation of the system's components, including the frontend, backend, AI models, and cloud services, and their interconnections. This enhancement aims to improve understanding of the system's design and functionality for external evaluators.

Highlights

• Architecture Diagram Generation: A new architecture diagram, docs/architecture.png, has been generated using Mermaid to visually represent the system's structure.
• Source Inclusion: The Mermaid source file, docs/architecture.mmd, is included to facilitate future updates and maintenance of the diagram.
• System Overview: The diagram illustrates the interaction between the Browser (Next.js PWA), Go Backend (Cloud Run), Gemini API (four models), and various Google Cloud services.
• Readability: All labels within the diagram are provided in English to ensure clarity and readability for judges, especially for the DevPost submission.

Changelog

• docs/architecture.mmd
  • Added the Mermaid source code for the new architecture diagram.

Activity

• The change is identified as documentation-only, with no code modifications.
• A test plan is provided to verify the rendering of docs/architecture.png on GitHub and its reference in README.md.
• The PR content was generated with Claude Code.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[coderabbitai]

Warning

Rate limit exceeded

@ComBba has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 9 minutes and 12 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between 6ac4aa2 and 51883e5.

⛔ Files ignored due to path filters (1)

• docs/architecture.png is excluded by !**/*.png

📒 Files selected for processing (1)

• docs/architecture.mmd

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch docs/issue-123-architecture-diagram

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[gemini-code-assist]

Code Review

This pull request adds a helpful architecture diagram, which is a great step for documenting the system. The diagram is largely accurate and provides a good overview of the components and their interactions. I've added a couple of suggestions to the Mermaid source file to enhance the accuracy of the connections between backend components and to clarify the progressive nature of the scene generation, making the diagram even more informative.

[gemini-code-assist]

The connections within the Backend subgraph could be more accurate to better reflect the component interactions seen in the code. The current chained representation WS --- SM --- LP --- TE is a bit misleading.

Based on internal/handler/websocket.go, the WebSocket Handler (WS) creates and orchestrates the other main components. Also, the Onboarding Pipeline (OP) is invoked by the Tool Executor (TE) via a tool call, so a link between them would improve clarity.

Consider restructuring this block to show these relationships more clearly, for example:

        WS --> SM
        WS --> LP
        LP --> TE
        TE --> OP
        OP -.->|persona| SM

Loading

[gemini-code-assist]

To improve clarity on the two-stage progressive image generation, consider making the labels for the generate_scene tool more specific. The current diagram shows two identical arrows, which doesn't fully convey that one is a quick preview and the other is the final, high-quality image.

Updating the labels will make the progressive nature of this feature more apparent.

    TE -->|"generate_scene (preview)"| FLASH
    TE -->|"generate_scene (final)"| IMAGEN