Build Your Own Scientific Image Review App with OpenCode

New to OpenCode? Start with OpenCode setup, model providers and course budget, then return here for your chosen app.

Turn “did you count that spot?” into a review another scientist can inspect

A plate image can look convincing while still containing bubbles, dust or touching objects. Colony Review puts every proposed object on screen and withholds the final count until a person has accepted or rejected each candidate.

You will build it with OpenCode from one synthetic plate and nine supplied candidate boxes. Eight boxes contain dark practice colonies; one contains a pale air bubble. The app does not run a detector, diagnose a sample or claim that the boxes are scientifically valid. It teaches the reusable image-processing workflow: display → overlay → review → count → export.

The result is an app you understand and can adapt to your permitted images. The worked example stays concrete; Step 16 asks you to define the different image, candidate source and decision rule for your own project.

(opens in a new tab)

You will finish with: a review app that withholds the colony count until every supplied candidate is accepted or rejected, then exports every decision with its coordinates.

First watch the 1:16 result tour. It shows the destination. It is not the lesson: Steps 1–16 below tell you exactly what to click in OpenCode, what to paste, when to press Send, and what must appear before continuing.

Silent result tour, with on-screen explanations. This replay operates the actual OpenCode-generated reference app; captions and highlights are editorial overlays. Read the descriptive transcript (opens in a new tab) · Download the movie (opens in a new tab).

Use: keep this manual beside OpenCode and your browser. Complete every Success check before continuing. Click a screenshot to enlarge it.

Files: reference kit: working app, synthetic plate, exact prompts and verification record (opens in a new tab). Extract it first: Windows right-click → Extract All; Mac double-click.

Files for this journey

Download everything at once as the reference kit (ZIP) (opens in a new tab), or single files as you reach the step that needs them. Save each file into your project folder under exactly this name. If a file opens in the browser instead of downloading, press Ctrl+S (Mac: Command+S) to save it.

The kit also contains the finished app, the recorded checkpoints (checkpoints/…) and the exact prompts.

1. Get OpenCode readyLink to step

Do: install and open OpenCode: follow Step 1 of Set up OpenCode in the L1 book Start With OpenCode. Complete any university Wi-Fi sign-in first.

Success: OpenCode opens. Do not choose a model yet.

If different: use the seminar recovery card.

2. Open your projectLink to step

In Finder/File Explorer: open Documents, create a new folder and name it colony-review.

In OpenCode: click Home → Add project (Home is at the top left) → choose Documents/colony-review → click Select folder at bottom right. In Recent sessions, click New session.

Success: colony-review appears below the empty prompt.

If different: return Home and add the correct folder. Opening the project must happen before model selection.

3. Select the seminar modelLink to step

In OpenCode: below the large message box, click the current model name. In the model menu, click the model assigned by the instructor. Wait for the menu to close. If an agent selector beside the model says Plan, click it and choose Build. If no agent selector is shown, Build is already the default in this recorded interface.

Success: the selected model name remains below the prompt.

If different: no working model → ask the instructor to check the seminar connection. Free availability is not guaranteed.

4. Add the synthetic plateLink to step

Do: download practice-plate.svg (opens in a new tab) from the reference kit into colony-review. Open it in a browser.

Success: a circular tan plate contains eight dark spots and one pale circle at the right.

If different: a text page appears → confirm the filename ends in .svg, not .svg.txt.

5. Start your coachLink to step

In OpenCode: click once inside the large box labelled Prompt or Ask anything. Paste the text below. Check that colony-review still appears below the box, then click the upward-arrow Send button at the lower right of the box.

Be my patient app-building coach. I am a beginner.
We will build Colony Review in this folder, one step at a time.
Use one index.html with inline HTML, CSS and JavaScript,
no packages, server or network calls.
practice-plate.svg is synthetic course data.
Explain briefly: Do, See, Success, If different.
Do not create files yet. Reply exactly:
Ready. Next: build the plate viewer.

Wait: while OpenCode is answering, Send changes to Stop. Do not send another request. Continue only after Stop disappears.

Success: the conversation shows Ready. Next: build the plate viewer. No index.html appears yet.

If different: files already appeared → tell it to stop, remove only those new files, and resend the bounded request.

6. Request the first working review appLink to step

In OpenCode: click the message box below the reply, paste this complete request, then click the upward-arrow Send button once:

Create only index.html. Build a polished accessible Colony Review app.
Show practice-plate.svg prominently with heading Colony Review and label
Synthetic practice plate. Overlay nine supplied candidate boxes in original
640x640 coordinates: C01 x168 y153 w44 h44; C02 308,133,34,34;
C03 415,180,50,50; C04 216,281,38,38; C05 357,277,56,56;
C06 141,396,48,48; C07 295,435,40,40; C08 442,412,36,36;
C09 469,294,42,42. These are supplied practice candidates, not detector
output. Each begins Unreviewed with labelled Accept and Reject buttons.
Selected candidate is highlighted. Show accepted, rejected and unreviewed
counts. Withhold final colony count as — pending review until all are
reviewed; then count equals accepted candidates. Add Reset review and Export
reviewed CSV, disabled until complete. CSV columns:
candidate_id,decision,x,y,width,height. Preserve alignment responsively.
No packages, server or network calls. Save index.html. Tell me only how to
open it and the exact first result to check.

Wait: leave OpenCode open until the Stop button changes back to Send. You should see tool activity such as Read and Write, followed by a reply saying index.html was created.

Success: index.html exists. OpenCode tells you to open it and check the supplied candidates.

If different: no file → click the agent selector, choose Build, paste Create index.html now using my previous specification., and click Send. Permission question → approve writing index.html inside colony-review, but reject requests to write elsewhere.

7. Open the app and locate candidate C09Link to step

In Finder/File Explorer: open colony-review and double-click index.html. Keep this browser window open beside OpenCode. In the app, scroll to the candidate list, click the row labelled C09, then look back at the plate.

Success: nine candidates are unreviewed, the final count reads — pending review, and C09 highlights both on the plate and in the list.

If different: plate missing → keep index.html and practice-plate.svg (opens in a new tab) in the same folder, then refresh.

8. Review the obvious coloniesLink to step

Do: accept C01 through C08. Watch the counts after each decision.

Success: 8 accepted, 0 rejected, 1 unreviewed; the final count still says — pending review.

If different: the final count appears before C09 is decided → return to OpenCode, click the message box, paste The final count appears while C09 is still Unreviewed. Keep it as — pending review until every candidate has a decision. Change only that behaviour., click Send, wait for Stop to disappear, refresh the browser and repeat C01–C08.

9. Reject the air bubbleLink to step

Do: inspect C09, then click Reject. This decision is a property of the supplied synthetic example, not a universal biological rule.

Success: 8 accepted, 1 rejected, 0 unreviewed, and final colony count 8. Export is enabled.

If different: C09 increments accepted → choose Reject on C09 and ensure the same stable ID changes rather than a tenth record appearing.

10. Export the reviewed evidenceLink to step

Do: click Export reviewed CSV and open the downloaded file in a text editor or spreadsheet.

Success: it has a header and nine records. C01–C08 are Accepted; C09 is Rejected; each record retains x, y, width and height.

If different: only a number or screenshot is exported → return to OpenCode and send: Export the full candidate list as CSV with exactly these columns: candidate_id,decision,x,y,width,height. Keep all nine records, including rejected candidates. Wait, refresh, complete the review again and re-export.

11. Prove Reset really resets the claimLink to step

Do: click Reset review and confirm the action if asked.

Success: all nine candidates return to Unreviewed, export is disabled and the final count returns to — pending review.

If different: count 8 remains visible → return to OpenCode and send: After Reset review, the old count 8 remains visible. Derive every displayed count from the current candidate decisions. Reset must restore 0 accepted, 0 rejected, 9 unreviewed and — pending review. Wait, refresh and repeat Reset.

12. Add truthful instructionsLink to step

In OpenCode: click the prompt box, paste the request below and click Send:

I reviewed the practice plate. C09 is a pale air bubble, not a colony.
Add short on-screen instructions saying to inspect each supplied candidate,
accept visible colonies and reject artefacts. Keep decision text as well as
colour. Add a visible warning that this training app reviews supplied
candidates and does not run a detector. Preserve all current behaviour.
Save index.html. Tell me the exact text I should see, then wait.

Wait: continue only when Stop disappears. In the browser, press Ctrl+R on Windows or Command+R on Mac.

Success: the app says candidates are supplied and that it does not run a detector. Decision is shown with text, not colour alone.

If different: it claims automatic detection → in OpenCode send No detector runs. Replace that claim with “supplied practice candidates”. Do not change the review controls., wait, then refresh again.

13. Try a different image safelyLink to step

In OpenCode: click the prompt box, paste this request and click Send:

Add a labelled local image input accepting PNG, JPEG and SVG. A selected
image may replace the displayed background using an object URL, but keep the
nine practice candidates only when practice-plate.svg or the built-in
practice plate is shown. For any other image, show “No candidates supplied
for this image” and withhold a count; never pretend to detect objects.
Add a Load practice plate button to recover. Revoke replaced object URLs.
Preserve the original file and all existing review behaviour. Save
index.html and tell me the exact browser actions to check, then wait.

Wait and try: after Stop disappears, refresh the browser. Click Choose image, select another permitted PNG, JPEG or SVG, then click Open in the file chooser.

Success: your image appears with No candidates supplied for this image; no boxes or count are invented. Load practice plate restores the synthetic example.

If different: the nine boxes remain on your image → in OpenCode send The nine practice boxes remain on my different image. Bind them only to practice-plate.svg. For every other image, hide all candidates and withhold the count., wait, refresh and choose the image again.

14. Recheck the core result after the changeLink to step

Do: click Load practice plate, accept C01–C08 and reject C09 again.

Success: final count is still 8 and the boxes remain aligned when the browser is resized.

If different: boxes drift → in OpenCode send At this browser width the boxes drift away from the colonies. Position image and overlay in one shared 640×640 coordinate container and scale them together. Do not manually move individual boxes., wait, refresh and repeat the wide/narrow check.

15. Leave a README for tomorrowLink to step

In OpenCode: click the prompt box, paste this request and click Send:

Read index.html, then create README.md with exact opening and practice steps,
the expected completed result (8 accepted, 1 rejected, final count 8), the
fact that candidates are supplied and no detector runs, the CSV fields, and
one next task: add manually drawn candidates. Do not change index.html.
Tell me which file you created, then wait.

Wait: after Stop disappears, check the response says README.md was created and index.html was not changed.

Success: README.md states 8 accepted, 1 rejected, final count 8; no detector; CSV fields; next task “add manually drawn candidates.”

If different: it describes features that do not exist → ask it to read index.html and document only observed current behaviour.

16. Continue in a fresh sessionLink to step

In OpenCode: click Home at top left → find colony-review → click New session. If the project is absent, click New project → Select folder, choose colony-review, and then click New session. Click the model name below the empty prompt and select the seminar model. Click the prompt box, paste the text below and click Send:

Read README.md and index.html without editing.
In three bullets tell me the app's purpose, how to open it,
and the recorded next task.

Success: the response identifies local candidate review, opening index.html, and manually drawn candidates as the next task.

If different: wrong project or no files → use New project → Select folder and choose colony-review before retrying.

17. Define your own image-processing handoffLink to step

Do: write three sentences before requesting code:

1. My permitted image is …
2. Candidate marks will come from … (manual drawing, an approved annotation file, or an actually executed method).
3. A reviewer decides … and the app may claim … only after …

Success: another scientist can distinguish the image, candidate source, human decision and final claim.

If different: “AI finds everything” appears anywhere → replace it with the exact observed candidate source and validation boundary.

18. Make one independent improvementLink to step

Do: choose one bounded improvement: manually draw a candidate, add a review note, or jump to the next unreviewed item. In OpenCode select Build, click the prompt box and write: Add [your chosen improvement]. Success means [observable result]. Change only index.html. Preserve the completed practice check: C01–C08 accepted, C09 rejected, final count 8, and nine exported rows. Tell me what to click to test it, then wait. Click Send and wait for Stop to disappear.

Success: demonstrate your feature, then repeat: reset → accept C01–C08 → reject C09 → export nine rows. Record the next task in README.

If different: the core check fails → describe the exact old and new result and ask OpenCode to restore it without removing your feature.

You now own a real image-review app and the reasoning boundary around its count. The transferable pattern is not “draw green boxes.” It is: preserve the source image, identify candidate provenance, keep every human decision inspectable, and withhold the claim until review is complete.

About this guided journey

The plate and candidate coordinates are synthetic course material. The app was generated through the recorded OpenCode build and then checked against the observable results above. It reviews supplied candidates; it does not run or validate a colony detector. Bring only permitted images to Step 17.