une logique senior-first allant au-delà de Familéo. Votre intuition (PDF + voix + animation douce des photos + texte humain ou agent) est technologiquement mûre aujourd’hui. La question clé n’est pas la faisabilité, mais l’architecture et l’ergonomie adaptées aux seniors.

Je vous propose une réponse structurée en quatre blocs :

1. ce qui est faisable aujourd’hui,
2. une architecture cible réaliste,
3. la comparaison OpenAI vs Google pour votre cas précis,
4. une recommandation d’ergonomie pour les inputs texte/image.

2. Architecture cible recommandée (simple et robuste)

Vue d’ensemble

Upload images + texte
        ↓
Structuration par "page"
        ↓
Agent IA (optionnel)
        ↓
TTS (voix)
        ↓
Moteur d’animation
        ↓
PDF + Vidéo + Audio

2.2. Génération de la voix (TTS)

Deux options solides aujourd’hui :

Option A — OpenAI (continuité équipe)

• Avantages :
  • API unifiée (texte → voix)
  • très bonne prosodie
  • voix naturelles en français
  • intégration fluide avec vos agents existants
• Usage typique :

POST /v1/audio/speech
{
  model: "gpt-4o-mini-tts",
  voice: "alloy",
  input: "Bonjour Mamie, voici une photo de Paul à son anniversaire…"
}

Option B — Google Cloud Text-to-Speech

• Avantages :
  • voix françaises très stables
  • excellente clarté pour seniors
  • voix WaveNet / Neural2
• Inconvénient :
  • stack Google à gérer (IAM, GCP)
  • moins cohérent si votre IA est chez OpenAI

2.3. Animation des images (simple et non intrusive)

Recommandation senior-compatible :

• pas de deepfake
• pas d’animation faciale
• uniquement :
  • zoom lent (Ken Burns)
  • transitions fondues
  • durée contrôlée (8–12 s)

Techno possible :

• Remotion (React → vidéo)
• FFmpeg (batch)
• After Effects en headless (si besoin premium)

2.4. PDF final + version audiovisuelle

• PDF :
  • image pleine page
  • texte en gros caractères
  • QR code → version audio/vidéo
• Vidéo :
  • lecture automatique sur tablette
  • compatible TV (Chromecast / Android TV)

4. Ergonomie recommandée pour les inputs texte/image

C’est ici que vous pouvez vraiment faire mieux que Familéo.

5. Conclusion stratégique

Oui, c’est :

• faisable aujourd’hui
• différenciant par rapport à Familéo
• aligné avec Synergia Senior

Votre avantage compétitif :

• multimodalité (texte + image + voix)
• agents IA au service du lien familial
• continuité avec le care management

Recommandation finale

• OpenAI pour agents + TTS
• Animation simple, non médicale
• UX ultra-guidée
• PDF + audio/vidéo comme formats égaux

Voici un MVP React (Vite) + Tailwind pour votre “Familéo-like” : upload d’images, texte par image, génération d’un script, TTS (via votre backend), prévisualisation, et export PDF.

Je vous donne un scaffold complet et directement exécutable (front) + un petit backend Node (proxy) pour appeler OpenAI sans exposer la clé côté navigateur.

1) Arborescence (proposée)

mvp-journal-senior/
  server/
    package.json
    index.js
    .env
  web/
    package.json
    vite.config.ts
    tailwind.config.js
    postcss.config.js
    index.html
    src/
      main.tsx
      App.tsx
      lib/api.ts
      types.ts
      components/
        Uploader.tsx
        PageEditor.tsx
        PreviewPlayer.tsx
        PdfExportButton.tsx

2) Backend minimal (proxy OpenAI) — server/index.js

server/package.json

{
  "name": "mvp-journal-senior-server",
  "type": "module",
  "private": true,
  "scripts": { "dev": "node index.js" },
  "dependencies": {
    "cors": "^2.8.5",
    "dotenv": "^16.4.5",
    "express": "^4.19.2"
  }
}

server/.env

OPENAI_API_KEY=sk-...
PORT=8787

server/index.js

import "dotenv/config";
import express from "express";
import cors from "cors";

const app = express();
app.use(cors());
app.use(express.json({ limit: "20mb" }));

const OPENAI_API_KEY = process.env.OPENAI_API_KEY;
if (!OPENAI_API_KEY) {
  console.error("Missing OPENAI_API_KEY in server/.env");
  process.exit(1);
}

app.get("/health", (_, res) => res.json({ ok: true }));

// 1) Générer un texte court "senior-friendly" pour une page (optionnel)
app.post("/api/page-text", async (req, res) => {
  try {
    const { rawText } = req.body || {};
    const prompt = `
Réécris ce texte pour une personne âgée : simple, chaleureux, phrases courtes.
Garde le sens. 1 à 2 phrases max. Français.
Texte: ${rawText ?? ""}
`.trim();

    const r = await fetch("https://api.openai.com/v1/responses", {
      method: "POST",
      headers: {
        "Authorization": `Bearer ${OPENAI_API_KEY}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        model: "gpt-4.1-mini",
        input: prompt,
      }),
    });

    if (!r.ok) {
      const err = await r.text();
      return res.status(500).json({ error: err });
    }
    const data = await r.json();

    // responses API: récupérer du texte de façon robuste
    const text =
      (data.output_text) ||
      (data.output?.[0]?.content?.[0]?.text) ||
      "";

    res.json({ text });
  } catch (e) {
    res.status(500).json({ error: String(e) });
  }
});

// 2) TTS: renvoyer un MP3 (ou autre) à partir d’un texte
app.post("/api/tts", async (req, res) => {
  try {
    const { text, voice = "alloy" } = req.body || {};
    if (!text) return res.status(400).json({ error: "Missing text" });

    const r = await fetch("https://api.openai.com/v1/audio/speech", {
      method: "POST",
      headers: {
        "Authorization": `Bearer ${OPENAI_API_KEY}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        model: "gpt-4o-mini-tts",
        voice,
        input: text,
        format: "mp3"
      }),
    });

    if (!r.ok) {
      const err = await r.text();
      return res.status(500).json({ error: err });
    }

    res.setHeader("Content-Type", "audio/mpeg");
    const buf = Buffer.from(await r.arrayBuffer());
    res.send(buf);
  } catch (e) {
    res.status(500).json({ error: String(e) });
  }
});

app.listen(process.env.PORT || 8787, () => {
  console.log(`Server listening on http://localhost:${process.env.PORT || 8787}`);
});

3) Front React + Tailwind — web/

web/package.json

{
  "name": "mvp-journal-senior-web",
  "private": true,
  "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "jspdf": "^2.5.2"
  },
  "devDependencies": {
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "autoprefixer": "^10.4.20",
    "postcss": "^8.4.49",
    "tailwindcss": "^3.4.15",
    "typescript": "^5.6.3",
    "vite": "^5.4.10"
  }
}

Tailwind quick setup

web/tailwind.config.js

export default {
  content: ["./index.html", "./src/**/*.{ts,tsx}"],
  theme: { extend: {} },
  plugins: [],
};

web/postcss.config.js

export default { plugins: { tailwindcss: {}, autoprefixer: {} } };

web/src/main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./styles.css";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

web/src/styles.css

@tailwind base;
@tailwind components;
@tailwind utilities;

4) Types + API helper

web/src/types.ts

export type JournalPage = {
  id: string;
  file: File;
  imageUrl: string;   // blob URL
  rawText: string;
  finalText: string;
  audioUrl?: string;  // blob URL MP3
  durationSec: number;
};

web/src/lib/api.ts

const API_BASE = import.meta.env.VITE_API_BASE || "http://localhost:8787";

export async function improveText(rawText: string): Promise<string> {
  const r = await fetch(`${API_BASE}/api/page-text`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ rawText }),
  });
  if (!r.ok) throw new Error(await r.text());
  const data = await r.json();
  return data.text || "";
}

export async function ttsMp3(text: string, voice?: string): Promise<Blob> {
  const r = await fetch(`${API_BASE}/api/tts`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ text, voice }),
  });
  if (!r.ok) throw new Error(await r.text());
  return await r.blob();
}

Créez web/.env :

VITE_API_BASE=http://localhost:8787

5) Composants

web/src/components/Uploader.tsx

import React from "react";
import { JournalPage } from "../types";

function uid() {
  return crypto.randomUUID ? crypto.randomUUID() : String(Date.now() + Math.random());
}

export default function Uploader({ onAdd }: { onAdd: (pages: JournalPage[]) => void }) {
  const onFiles = (files: FileList | null) => {
    if (!files || files.length === 0) return;
    const pages: JournalPage[] = Array.from(files).map((file) => ({
      id: uid(),
      file,
      imageUrl: URL.createObjectURL(file),
      rawText: "",
      finalText: "",
      durationSec: 10,
    }));
    onAdd(pages);
  };

  return (
    <div className="rounded-2xl border bg-white p-4 shadow-sm">
      <div className="flex items-center justify-between gap-3">
        <div>
          <div className="text-lg font-semibold">Importer des photos</div>
          <div className="text-sm text-slate-600">JPG/PNG. Une photo = une page.</div>
        </div>
        <label className="cursor-pointer rounded-xl bg-slate-900 px-4 py-2 text-white text-sm">
          Choisir…
          <input
            type="file"
            accept="image/*"
            multiple
            className="hidden"
            onChange={(e) => onFiles(e.target.files)}
          />
        </label>
      </div>
    </div>
  );
}

web/src/components/PageEditor.tsx

import React, { useState } from "react";
import { JournalPage } from "../types";
import { improveText, ttsMp3 } from "../lib/api";

export default function PageEditor({
  page,
  onUpdate,
  onRemove,
}: {
  page: JournalPage;
  onUpdate: (p: JournalPage) => void;
  onRemove: () => void;
}) {
  const [busy, setBusy] = useState(false);
  const textForTts = page.finalText.trim() || page.rawText.trim();

  const doImprove = async () => {
    setBusy(true);
    try {
      const text = await improveText(page.rawText);
      onUpdate({ ...page, finalText: text });
    } finally {
      setBusy(false);
    }
  };

  const doTts = async () => {
    if (!textForTts) return;
    setBusy(true);
    try {
      const blob = await ttsMp3(textForTts, "alloy");
      const audioUrl = URL.createObjectURL(blob);
      onUpdate({ ...page, audioUrl });
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="rounded-2xl border bg-white p-4 shadow-sm">
      <div className="flex items-start gap-4">
        <img
          src={page.imageUrl}
          className="h-28 w-28 rounded-xl object-cover border"
          alt="page"
        />

        <div className="flex-1">
          <div className="flex items-center justify-between gap-2">
            <div className="font-semibold">Texte associé</div>
            <button
              onClick={onRemove}
              className="text-sm rounded-lg border px-3 py-1 hover:bg-slate-50"
            >
              Supprimer
            </button>
          </div>

          <textarea
            value={page.rawText}
            onChange={(e) => onUpdate({ ...page, rawText: e.target.value })}
            placeholder="Ex: Paul fête ses 7 ans. Il pense à toi."
            className="mt-2 w-full rounded-xl border p-3 text-sm outline-none focus:ring-2 focus:ring-slate-200"
            rows={3}
          />

          <div className="mt-2 grid grid-cols-1 md:grid-cols-2 gap-2">
            <div className="rounded-xl border p-3">
              <div className="text-xs font-semibold text-slate-600">Version finale (senior-friendly)</div>
              <textarea
                value={page.finalText}
                onChange={(e) => onUpdate({ ...page, finalText: e.target.value })}
                placeholder="Générée ou éditée…"
                className="mt-2 w-full rounded-xl border p-3 text-sm outline-none focus:ring-2 focus:ring-slate-200"
                rows={3}
              />
              <div className="mt-2 flex gap-2">
                <button
                  disabled={busy || !page.rawText.trim()}
                  onClick={doImprove}
                  className="rounded-xl bg-slate-900 px-3 py-2 text-white text-sm disabled:opacity-50"
                >
                  {busy ? "…" : "IA: simplifier"}
                </button>
              </div>
            </div>

            <div className="rounded-xl border p-3">
              <div className="text-xs font-semibold text-slate-600">Voix (TTS)</div>
              <div className="mt-2 flex gap-2">
                <button
                  disabled={busy || !textForTts}
                  onClick={doTts}
                  className="rounded-xl bg-slate-900 px-3 py-2 text-white text-sm disabled:opacity-50"
                >
                  {busy ? "…" : "Générer audio"}
                </button>
                <span className="text-xs text-slate-500 self-center">
                  Durée cible: {page.durationSec}s
                </span>
              </div>

              {page.audioUrl && (
                <audio className="mt-3 w-full" controls src={page.audioUrl} />
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

web/src/components/PreviewPlayer.tsx

import React, { useEffect, useMemo, useRef, useState } from "react";
import { JournalPage } from "../types";

export default function PreviewPlayer({ pages }: { pages: JournalPage[] }) {
  const [idx, setIdx] = useState(0);
  const page = pages[idx];
  const audioRef = useRef<HTMLAudioElement | null>(null);

  useEffect(() => {
    if (!page) return;
    // lecture auto si audio dispo
    if (page.audioUrl && audioRef.current) {
      audioRef.current.load();
      audioRef.current.play().catch(() => {});
    }
  }, [idx, page?.audioUrl]);

  if (!pages.length) {
    return (
      <div className="rounded-2xl border bg-white p-6 shadow-sm text-slate-600">
        Ajoutez des pages pour prévisualiser.
      </div>
    );
  }

  return (
    <div className="rounded-2xl border bg-white p-4 shadow-sm">
      <div className="flex items-center justify-between">
        <div className="font-semibold">Prévisualisation</div>
        <div className="text-sm text-slate-600">
          {idx + 1} / {pages.length}
        </div>
      </div>

      <div className="mt-3 rounded-2xl border overflow-hidden">
        <div className="relative bg-black">
          <img
            src={page.imageUrl}
            alt="preview"
            className="w-full h-[340px] object-contain animate-[pulse_8s_ease-in-out_infinite]"
          />
          <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
            <div className="text-white text-lg leading-snug">
              {(page.finalText || page.rawText || "").trim()}
            </div>
          </div>
        </div>
      </div>

      {page.audioUrl && (
        <audio ref={audioRef} className="mt-3 w-full" controls>
          <source src={page.audioUrl} type="audio/mpeg" />
        </audio>
      )}

      <div className="mt-3 flex gap-2">
        <button
          onClick={() => setIdx((v) => Math.max(0, v - 1))}
          disabled={idx === 0}
          className="rounded-xl border px-4 py-2 text-sm disabled:opacity-50"
        >
          Précédent
        </button>
        <button
          onClick={() => setIdx((v) => Math.min(pages.length - 1, v + 1))}
          disabled={idx === pages.length - 1}
          className="rounded-xl border px-4 py-2 text-sm disabled:opacity-50"
        >
          Suivant
        </button>
      </div>
    </div>
  );
}

web/src/components/PdfExportButton.tsx

import React from "react";
import jsPDF from "jspdf";
import { JournalPage } from "../types";

async function imgToDataUrl(url: string): Promise<string> {
  const img = await fetch(url);
  const blob = await img.blob();
  return await new Promise((resolve) => {
    const r = new FileReader();
    r.onload = () => resolve(String(r.result));
    r.readAsDataURL(blob);
  });
}

export default function PdfExportButton({ pages }: { pages: JournalPage[] }) {
  const exportPdf = async () => {
    if (!pages.length) return;

    // A4 portrait
    const doc = new jsPDF({ unit: "pt", format: "a4" });
    const W = doc.internal.pageSize.getWidth();
    const H = doc.internal.pageSize.getHeight();

    for (let i = 0; i < pages.length; i++) {
      const p = pages[i];
      if (i > 0) doc.addPage();

      const dataUrl = await imgToDataUrl(p.imageUrl);

      // image: plein cadre avec marges
      const margin = 28;
      const imgH = H * 0.62;
      doc.addImage(dataUrl, "JPEG", margin, margin, W - 2 * margin, imgH - margin);

      // texte grand pour senior
      const text = (p.finalText || p.rawText || "").trim();
      doc.setFont("helvetica", "normal");
      doc.setFontSize(18);

      const textY = imgH + 40;
      const lines = doc.splitTextToSize(text, W - 2 * margin);
      doc.text(lines, margin, textY);

      // QR placeholder (optionnel) : vous pourrez ajouter un QR vers une URL audio/vidéo
      doc.setFontSize(10);
      doc.setTextColor(120);
      doc.text("Audio/vidéo : à ajouter via QR code (MVP)", margin, H - 28);
      doc.setTextColor(0);
    }

    doc.save("journal-senior.pdf");
  };

  return (
    <button
      onClick={exportPdf}
      disabled={!pages.length}
      className="rounded-xl bg-slate-900 px-4 py-2 text-white text-sm disabled:opacity-50"
    >
      Exporter PDF
    </button>
  );
}

6) App principale

web/src/App.tsx

import React, { useMemo, useState } from "react";
import Uploader from "./components/Uploader";
import PageEditor from "./components/PageEditor";
import PreviewPlayer from "./components/PreviewPlayer";
import PdfExportButton from "./components/PdfExportButton";
import { JournalPage } from "./types";

export default function App() {
  const [pages, setPages] = useState<JournalPage[]>([]);

  const addPages = (newPages: JournalPage[]) => {
    setPages((prev) => [...prev, ...newPages]);
  };

  const updatePage = (id: string, patch: JournalPage) => {
    setPages((prev) => prev.map((p) => (p.id === id ? patch : p)));
  };

  const removePage = (id: string) => {
    setPages((prev) => prev.filter((p) => p.id !== id));
  };

  return (
    <div className="min-h-screen bg-slate-50">
      <div className="mx-auto max-w-6xl p-6">
        <div className="flex items-start justify-between gap-4">
          <div>
            <div className="text-2xl font-bold">Journal Senior — MVP</div>
            <div className="text-slate-600">
              Upload photos → texte → TTS → prévisualisation → PDF
            </div>
          </div>
          <PdfExportButton pages={pages} />
        </div>

        <div className="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-6">
          <div className="space-y-4">
            <Uploader onAdd={addPages} />

            {pages.map((p) => (
              <PageEditor
                key={p.id}
                page={p}
                onUpdate={(np) => updatePage(p.id, np)}
                onRemove={() => removePage(p.id)}
              />
            ))}
          </div>

          <div className="space-y-4">
            <PreviewPlayer pages={pages} />

            <div className="rounded-2xl border bg-white p-4 shadow-sm text-sm text-slate-600">
              Prochaine étape (hors MVP) : génération vidéo (Ken Burns + TTS) via Remotion/FFmpeg,
              et QR code pointant vers une URL de lecture sur tablette/TV.
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

7) Lancer le MVP

Backend

cd server
npm i
npm run dev

Front

cd web
npm i
npm run dev

Ce que couvre exactement ce MVP

• Upload multi-images
• “1 image = 1 texte”
• IA optionnelle : simplification “senior-friendly”
• TTS OpenAI via proxy backend (MP3)
• Preview image + texte + audio
• Export PDF (A4) avec photo + texte

Voici une liste claire, minimale et cohérente des écrans pour le MVP de votre web app « Familio Augmenté », pensée pour un lancement rapide tout en couvrant les fonctions différenciantes (texte + voix + vidéo + PDF).

Je distingue volontairement :

• écrans côté contributeurs (famille / aidants),
• écrans côté senior (consultation),
• et écrans transverses (état, partage).

Si vous devez resserrer à l’essentiel :

👉 9 écrans suffisent pour un MVP très solide.