Puheohjattavan kuvageneraattorisovelluksen kehittäminen OpenAI DALL-E 3, React-Speech ja TailwindCSS:llä
Ari, Ahmet (2025)
2025
All rights reserved. This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2025052616154
https://urn.fi/URN:NBN:fi:amk-2025052616154
Tiivistelmä
Tässä opinnäytetyössä luotiin sovellus kuvagenerointiin käyttäen äänentunnistusta, ReactJS:ää, TailwindCSS:ää, DALL-E 3 -mallia ja React-Speech-Recognition -kirjastoa. Työn tavoitteena oli kehittää responsiivinen sovellus, joka toimii kaikilla laitteilla ja mahdollistaa kuvien luomisen käyttäjän puheella annettujen komentojen perusteella. Aihe valittiin tekijän oman kiinnostuksen ja puheohjattujen sovellusten kasvavan trendin vuoksi.
Sovellus toteutettiin Reactilla, jossa käyttöliittymän tyylittelyssä hyödynnettiin TailwindCSS:n utility first lähestymistapaa. Äänentunnistus toteutettiin React-Speech-Recognition -kirjaston avulla, ja kuvat generoitiin OpenAI:n DALL-E 3 -mallin avulla API-kutsuin. Sovellusta testattiin paikallisesti Chrome DevTools -työkaluilla.
Lopputuloksena syntyi sovellus, joka täyttää sille asetetut perustoiminnalliset tavoitteet. Sovellus kykenee tunnistamaan käyttäjän puhekomennon, muuntamaan sen tekstiksi ja lähettämään sen DALL-E 3 -mallille, joka palauttaa pyynnön mukaisen kuvan. Kehityksen aikana ilmeni haasteita, kuten samanaikaiset pyynnöt, jotka saatiin ratkaistua hyödyntämällä Reactin useRef-hookia ja peruutusmekanismia.
Johtopäätöksissä todetaan, että alkuperäiset tavoitteet saavutettiin ja tekijä sai arvokasta kokemusta modernien teknologioiden ja tekoälyn yhdistämisestä. Sovelluksen jatkokehitystä ajatellen voitaisiin parantaa selainten välistä yhteensopivuutta, kehittää mobiilisovellusversio sekä lisätä ominaisuuksia, kuten käyttäjätilit ja kuvien tallennusmahdollisuus.
Sovellus toteutettiin Reactilla, jossa käyttöliittymän tyylittelyssä hyödynnettiin TailwindCSS:n utility first lähestymistapaa. Äänentunnistus toteutettiin React-Speech-Recognition -kirjaston avulla, ja kuvat generoitiin OpenAI:n DALL-E 3 -mallin avulla API-kutsuin. Sovellusta testattiin paikallisesti Chrome DevTools -työkaluilla.
Lopputuloksena syntyi sovellus, joka täyttää sille asetetut perustoiminnalliset tavoitteet. Sovellus kykenee tunnistamaan käyttäjän puhekomennon, muuntamaan sen tekstiksi ja lähettämään sen DALL-E 3 -mallille, joka palauttaa pyynnön mukaisen kuvan. Kehityksen aikana ilmeni haasteita, kuten samanaikaiset pyynnöt, jotka saatiin ratkaistua hyödyntämällä Reactin useRef-hookia ja peruutusmekanismia.
Johtopäätöksissä todetaan, että alkuperäiset tavoitteet saavutettiin ja tekijä sai arvokasta kokemusta modernien teknologioiden ja tekoälyn yhdistämisestä. Sovelluksen jatkokehitystä ajatellen voitaisiin parantaa selainten välistä yhteensopivuutta, kehittää mobiilisovellusversio sekä lisätä ominaisuuksia, kuten käyttäjätilit ja kuvien tallennusmahdollisuus.