Fotoaparát + Imagga API

Cíl: Vytvořte mobilní aplikaci, která umožní uživateli vyfotit snímek (nebo vybrat z galerie), odešle ho na API služby Imagga a zobrazí seznam rozpoznaných objektů.

Aplikaci lze vytvořit například pomocí Ionic + JS, Ionic + React/Angular nebo React Native.

1. Integrace Capacitoru (Přístup k hardware)

Aby mohla webová aplikace psaná v HTML a JavaScriptu komunikovat s hardwarem telefonu (v našem případě přímo vyvolat rozhraní nativního fotoaparátu nebo otevřít galerii), potřebujeme kód běžící v prohlížeči propojit se systémem. Tímto propojovacím mostem je právě framework Capacitor.

Než se pustíte do kódování, je nezbytné ho do projektu integrovat. Jedním z nejjednodušších způsobů je využití pluginu WebNative – stačí kliknout na ikonu Integrate Capacitor.

Následně je potřeba doinstalovat plugin pro fotoaparát. V rozšíření WebNative klikněte na ikonu tří teček pro správu balíčků a přidejte modul @capacitor/camera.

Alternativně: Modul lze přidat i klasicky přes terminál ve složce projektu příkazem:

npm install @capacitor/camera

Pro více informací a ukázky kódu navštivte oficiální dokumentaci Capacitor Camera pluginu.

2. Příprava (Imagga API)

Zaregistrujte se zdarma na imagga.com.

V sekci Dashboard najděte své API Key a API Secret. Ty vložíte do kódu.

Více informací a ukázku fungování si můžete prohlédnout v oficiálním demu.

3. HTML (index.html)

Tento kód definuje vzhled aplikace. Obsahuje i speciální skript pro testování v prohlížeči (PWA Elements). 

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Detektor</title>
    <script type="module" src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.esm.js"></script>
</head>
<body>
    <h1>AI Rozpoznávač</h1>
    <button id="btnFoto">Vyfotit nebo vybrat fotku</button>
    <ul id="vysledky"></ul>
    <script type="module" src="main.js"></script>
</body>
</html>

4. JavaScript (main.js)

Tento skript propojuje fotoaparát s AI službou.

import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';

// NASTAVENÍ: Vložte své údaje z Imagga Dashboard
const API_KEY = 'VÁŠ_API_KLÍČ';
const API_SECRET = 'VÁŠE_API_HESLO';
const authHeader = 'Basic ' + btoa(API_KEY + ':' + API_SECRET);

document.getElementById('btnFoto').addEventListener('click', async () => {
    try {
        // 1. Získání fotky (Kamera nebo Galerie)
        const photo = await Camera.getPhoto({
            quality: 90,
            resultType: CameraResultType.Uri,
            source: CameraSource.Prompt
        });

        // 2. Převod na data pro odeslání (Blob)
        const response = await fetch(photo.webPath);
        const blob = await response.blob();
        
        const formData = new FormData();
        formData.append('image', blob, 'foto.jpg');

        // 3. Odeslání na Imagga API
        const apiResponse = await fetch('https://api.imagga.com/v2/tags', {
            method: 'POST',
            headers: { 'Authorization': authHeader },
            body: formData
        });

        const data = await apiResponse.json();
        
        // 4. Vypsání výsledků na obrazovku
        const list = document.getElementById('vysledky');
        list.innerHTML = ''; 

        data.result.tags.forEach(t => {
            if (t.confidence > 40) { // Zobrazíme jen výsledky s jistotou nad 40 %
                list.innerHTML += `<li><strong>${t.tag.en}</strong> (${Math.round(t.confidence)} %)</li>`;
            }
        });

    } catch (err) {
        console.error('Chyba:', err);
        alert('Něco se nepovedlo. Zkontrolujte konzoli.');
    }
});

5. Možnosti rozšíření

Aplikaci lze rozšířit o další funkce, které služba Imagga nabízí. Princip komunikace (zaslání binární fotky přes FormData) zůstává úplně stejný, stačí si v HTML přidat další tlačítko a namířit ho na jinou API adresu, například:

Kompletní reference použitelných API volání je k nalezení v oficiální dokumentaci.