Audio Diary (Audio Diario)

A modern, privacy‑friendly journaling web app built with React, TypeScript, Vite, Tailwind, and shadcn/ui. Capture daily notes, record voice memos, transcribe and summarize them with OpenAI, export your data, and track your mood over time.

Key highlights:

• Local‑first: journal data is stored in your browser (localStorage).
• Optional AI: uses your OpenAI API key client‑side for transcription and summaries.
• Mobile‑friendly: tuned header layout and safe‑area padding for Android/iOS.
• i18n: English and Italian with language switching in the UI.

Goals

The goal is to create an Android app that lets you upload or record an audio file and obtain a transcription using your OpenAI API key and the Whisper model. Afterwards you can optionally generate a summary driven by a customizable prompt when desired.

Manual audio file uploads are now supported alongside in-app recording.

Features

• Daily notes

  • Multiple notes per day (add, select, delete a specific note)
  • Rich text area for thoughts and reflections
  • 1–5 star rating for the day (with one‑click reset)

• Audio notes and AI

  • Record audio in the browser (Web MediaRecorder)
  • Upload existing audio files from your device
  • Transcribe with Whisper (whisper-1) using your OpenAI key
  • Summarize transcripts with GPT models (configurable)
  • Editable “System Prompt” to customize summaries’ tone and content
  • Delete a note’s audio (and all audios at once from Settings)
  • Copy either the generated summary or full transcript into your note with one click

• Export

  • Export all notes to JSON
  • Export to ICS calendar file (one event per note) with localized titles

• Calendar and statistics

  • Calendar shows only today highlighted on first load; after you pick a date, days with entries become highlighted
  • Stats moved to the bottom of the page: total entries, average rating, number of recordings
  • Reset all ratings to zero with one click (does not delete content)

• Internationalization (i18n)

  • English and Italian translations
  • Dynamic date localization (date‑fns locales)
  • Quick language switch in the header and in Settings

• Mobile polish

  • Safe‑area insets (top/bottom) for devices with cutouts
  • Responsive, centered header — controls fit on small screens

Screenshots

Add your screenshots here (optional):

• Calendar and daily note view

  

• Audio controls and AI actions

  

• Export dialog and Settings

  

Getting Started

Prerequisites:

• Node.js 18+ and npm

Install and run:

npm install
npm run dev

Build:

npm run build
npm run preview

Docker

Two options are provided: run the published image from GitHub Container Registry (GHCR) or build locally.

• Pull and run from GHCR (version 1.0.7):

docker run --rm -p 8080:80 ghcr.io/razdnut/audiodiary:1.0.7
# Then open http://localhost:8080

• Build and run locally:

docker build -t audiodiary:local .
docker run --rm -p 8080:80 audiodiary:local

Docker Compose

Use the included compose file to build and run:

docker compose up --build
# Open http://localhost:8080

Android (Capacitor)

Build an Android APK with Capacitor.

Local (Android Studio):

• Prereqs: Android Studio (SDK + build tools), Java 17.
• Required permissions (already declared in android/app/src/main/AndroidManifest.xml):
  • RECORD_AUDIO and MODIFY_AUDIO_SETTINGS
  • READ_MEDIA_AUDIO (Android 13+) and legacy storage permissions for older devices
• Steps:
  1. Install deps: npm install
  2. Build web: npm run build
  3. Add/sync Android: npm run cap:add:android (first time), then npm run cap:sync
  4. Open in Android Studio: npm run android:open
  5. Build a Debug APK: from Android Studio, or via Gradle: cd android && ./gradlew assembleDebug
  6. APK path: android/app/build/outputs/apk/debug/app-debug.apk

CI (GitHub Actions):

• This repo includes a workflow that builds a Debug APK on tag push (v*) or manual dispatch:
  • .github/workflows/android-apk.yml
  • The APK is uploaded as an artifact and attached to the GitHub Release for the tag.

OpenAI Setup (Optional)

All AI functionality runs in the browser. Open Settings and paste your OpenAI API key. You can choose:

• Transcription model: whisper-1
• Summary model: e.g., gpt-4o-mini, gpt-4o, gpt-3.5-turbo
• System Prompt: customize how summaries are generated

Important: this app uses dangerouslyAllowBrowser: true in the OpenAI client. Do not use a production key without a trusted backend. Consider proxying requests in production.

Data Storage and Privacy

• Notes, ratings, transcripts, summaries, and simple flags are stored in localStorage.
• Audio is recorded as a Blob and referenced via a temporary Object URL (blob:). As such, audio blobs are not reliably persisted across page reloads or different sessions. Use Export to save your content or a proper storage backend if you need permanent audio storage.
• You can delete audio per note or delete all audio (and related transcripts/summaries) from Settings.

Internationalization

• The app supports Italian and English.
• Switch language from the header selector or within Settings.
• Date formatting adapts automatically via date-fns locales.

Exporting

• JSON: Exports all notes as an array (date, content, rating, transcript, summary, audioUrl).
• ICS: Creates calendar events (18:00–18:30 by default) for each note.
  • Titles and calendar name are localized.

Keyboard and UX Tips

• Save Entry: saves the currently selected note for the selected day.
• New note: creates a new blank note for the day and switches to it.
• Delete note: removes just the selected note.
• Clear: clears the current form values (does not delete saved entries until you Save).

Tech Stack

• React 18 + TypeScript + Vite
• Tailwind CSS + shadcn/ui + Radix UI
• date‑fns for date formatting and locales
• ics for calendar export

Project Structure

• src/pages/DailyJournal.tsx — main journal UI and logic (calendar, notes, stats)
• src/components/AudioControls.tsx — recording, transcribing, summarizing, and audio UI
• src/components/SettingsDialog.tsx — API key, models, system prompt, language, delete all audio
• src/components/ExportDialog.tsx — export to JSON/ICS
• src/i18n/i18n.tsx — i18n provider, translations, and date locales
• src/services/openai.ts — OpenAI calls (transcription and summaries)
• src/utils/export-utils.ts — JSON/ICS export helpers

Roadmap Ideas

• Persistent audio storage (IndexedDB or backend upload)
• Per‑note tags and search
• Charts and insights for mood tracking over time

License

MIT — see LICENSE for details.