Yarat\u0131c\u0131 s\u00fcre\u00e7lerde zaman ve kaynak s\u0131k\u0131nt\u0131s\u0131 m\u0131 ya\u015f\u0131yorsunuz? Pazarlama, tasar\u0131m ve i\u00e7erik \u00fcretimi alan\u0131nda yapay zekan\u0131n d\u00f6n\u00fc\u015ft\u00fcr\u00fcc\u00fc g\u00fcc\u00fcnden faydalanmak hi\u00e7 bu kadar kolay olmam\u0131\u015ft\u0131. Angular’\u0131n modern ve g\u00fc\u00e7l\u00fc mimarisiyle Google’\u0131n son teknoloji yapay zeka modelleri Gemini (metin), Imagen (g\u00f6rsel) ve Veo (video) bir araya geldi\u011finde, hayal g\u00fcc\u00fcn\u00fcz\u00fc ger\u00e7e\u011fe d\u00f6n\u00fc\u015ft\u00fcren kapsaml\u0131 bir yarat\u0131c\u0131 s\u00fcit in\u015fa etmek m\u00fcmk\u00fcn hale geliyor. Bu teknik makalede, bu g\u00fc\u00e7l\u00fc bile\u015fenleri bir araya getirerek kendi yapay zeka destekli yarat\u0131c\u0131 platformunuzu ad\u0131m ad\u0131m nas\u0131l kuraca\u011f\u0131n\u0131z\u0131 ke\u015ffedeceksiniz. Manuel s\u00fcre\u00e7lerin yava\u015fl\u0131\u011f\u0131ndan ve tekrarlay\u0131c\u0131 do\u011fas\u0131ndan s\u0131k\u0131lan herkes i\u00e7in bu rehber, verimlilik ve inovasyonun kap\u0131lar\u0131n\u0131 aral\u0131yor.<\/p>\n
G\u00fcn\u00fcm\u00fcz\u00fcn rekabet\u00e7i dijital d\u00fcnyas\u0131nda, i\u00e7erik \u00fcretimi h\u0131z\u0131 ve \u00e7e\u015fitlili\u011fi i\u015fletmeler i\u00e7in kritik \u00f6neme sahiptir. Pazarlama kampanyalar\u0131ndan \u00fcr\u00fcn tan\u0131t\u0131mlar\u0131na, e\u011fitim materyallerinden sosyal medya g\u00f6nderilerine kadar her alanda s\u00fcrekli yeni ve ilgi \u00e7ekici i\u00e7eriklere ihtiya\u00e7 duyulur. Ancak bu i\u00e7erikleri tamamen insan g\u00fcc\u00fcyle \u00fcretmek, hem zaman al\u0131c\u0131 hem de maliyetli bir s\u00fcre\u00e7 olabilir. \u0130\u015fte tam da bu noktada, yapay zeka destekli yarat\u0131c\u0131 s\u00fcitler devreye giriyor ve yarat\u0131c\u0131 end\u00fcstride devrim niteli\u011finde bir de\u011fi\u015fim vaat ediyor.<\/p>\n
Bu s\u00fcitler, temel olarak yapay zeka modellerinin metin, g\u00f6rsel ve video gibi farkl\u0131 multimedya formatlar\u0131n\u0131 anlama, \u00fcretme ve manip\u00fcle etme yeteneklerini tek bir platformda birle\u015ftirir. Bu entegrasyon sayesinde, kullan\u0131c\u0131lar karma\u015f\u0131k komutlar veya basit metin giri\u015fleriyle dakikalar i\u00e7inde y\u00fcksek kaliteli ve \u00f6zg\u00fcn i\u00e7erikler olu\u015fturabilirler. \u00d6rne\u011fin, bir pazarlama uzman\u0131 yeni bir \u00fcr\u00fcn lansman\u0131 i\u00e7in onlarca farkl\u0131 sosyal medya g\u00f6nderisi varyasyonu olu\u015fturabilir, bir grafik tasar\u0131mc\u0131 yeni bir kampanya g\u00f6rseli i\u00e7in y\u00fczlerce farkl\u0131 konsepti deneyebilir ya da bir e\u011fitimci karma\u015f\u0131k bir konuyu a\u00e7\u0131klayan k\u0131sa bir animasyon videosunu an\u0131nda \u00fcretebilir. Bu, geleneksel y\u00f6ntemlerle haftalar veya aylar s\u00fcrebilecek s\u00fcre\u00e7leri sadece birka\u00e7 saate indirme potansiyeli ta\u015f\u0131r.<\/p>\n
Google’\u0131n Gemini, Imagen ve Veo modelleri, bu alanda \u00e7\u0131\u011f\u0131r a\u00e7an teknolojiler sunmaktad\u0131r. Gemini, sadece metin \u00fcretme kapasitesiyle de\u011fil, ayn\u0131 zamanda farkl\u0131 dilleri anlama, \u00e7evirme ve kod yazma yetenekleriyle de \u00f6ne \u00e7\u0131kar. \u0130\u00e7erik olu\u015fturucular, blog yaz\u0131s\u0131 taslaklar\u0131ndan \u00fcr\u00fcn a\u00e7\u0131klamalar\u0131na, e-posta kampanyalar\u0131ndan etkile\u015fimli sohbet botu diyaloglar\u0131na kadar geni\u015f bir yelpazede metin tabanl\u0131 i\u00e7erikleri Gemini arac\u0131l\u0131\u011f\u0131yla h\u0131zla \u00fcretebilirler. Imagen ise metin a\u00e7\u0131klamalar\u0131n\u0131 \u00e7arp\u0131c\u0131 g\u00f6rsellere d\u00f6n\u00fc\u015ft\u00fcrme konusunda ola\u011fan\u00fcst\u00fc bir ba\u015far\u0131ya sahiptir. Marka kimli\u011fine uygun logolar, \u00fcr\u00fcn ill\u00fcstrasyonlar\u0131, web sitesi aray\u00fcz tasar\u0131mlar\u0131 veya sanatsal \u00e7al\u0131\u015fmalar, Imagen’\u0131n yetenekleri aras\u0131ndad\u0131r. Son olarak Veo, metinden veya di\u011fer girdilerden hareketle dinamik ve y\u00fcksek kaliteli video i\u00e7erikleri olu\u015fturarak, hikaye anlat\u0131m\u0131n\u0131 yepyeni bir boyuta ta\u015f\u0131r. Reklam filmleri, k\u0131sa belgeseller, e\u011fitim videolar\u0131 veya animasyonlar, Veo ile kolayca hayata ge\u00e7irilebilir.<\/p>\n
Bu AI modellerinin Angular gibi modern bir frontend \u00e7er\u00e7evesiyle birle\u015ftirilmesi, kullan\u0131c\u0131 dostu, h\u0131zl\u0131 ve \u00f6l\u00e7eklenebilir uygulamalar\u0131n \u00f6n\u00fcn\u00fc a\u00e7ar. Angular, bile\u015fen tabanl\u0131 yap\u0131s\u0131, g\u00fc\u00e7l\u00fc veri ba\u011flama yetenekleri ve mod\u00fcler mimarisi sayesinde karma\u015f\u0131k AI entegrasyonlar\u0131n\u0131 dahi kolayca y\u00f6netilebilir hale getirir. Sonu\u00e7 olarak, yapay zeka yarat\u0131c\u0131 s\u00fcitleri sadece bir verimlilik arac\u0131 olmakla kalmaz, ayn\u0131 zamanda yarat\u0131c\u0131 end\u00fcstrideki herkesin potansiyelini art\u0131rarak daha \u00f6zg\u00fcn, \u00e7e\u015fitli ve etkili i\u00e7erikler \u00fcretmesine olanak tan\u0131r. Bu teknoloji, i\u015fletmelerin pazarlama stratejilerini g\u00fc\u00e7lendirmelerine, i\u00e7erik \u00fcreticilerinin i\u015f ak\u0131\u015flar\u0131n\u0131 optimize etmelerine ve bireylerin yarat\u0131c\u0131 fikirlerini h\u0131zla somutla\u015ft\u0131rmalar\u0131na yard\u0131mc\u0131 olur. Geleneksel yakla\u015f\u0131mlar\u0131n s\u0131n\u0131rlar\u0131n\u0131 zorlayarak, yarat\u0131c\u0131l\u0131k ve teknoloji aras\u0131ndaki k\u00f6pr\u00fcy\u00fc kurar.<\/p>\n
Yapay zeka modellerinin g\u00fcc\u00fcn\u00fc kullan\u0131c\u0131 dostu bir aray\u00fczle birle\u015ftirmek i\u00e7in sa\u011flam bir frontend altyap\u0131s\u0131na ihtiyac\u0131m\u0131z var. Angular, sundu\u011fu kapsaml\u0131 \u00f6zellik seti, bile\u015fen tabanl\u0131 mimarisi ve g\u00fc\u00e7l\u00fc CLI (Komut Sat\u0131r\u0131 Aray\u00fcz\u00fc) ile bu t\u00fcr projeler i\u00e7in ideal bir se\u00e7enektir. \u0130lk ad\u0131m\u0131m\u0131z, yeni bir Angular projesi olu\u015fturmak ve gerekli ba\u011f\u0131ml\u0131l\u0131klar\u0131 ayarlamak olacakt\u0131r. Ard\u0131ndan, AI API’leriyle g\u00fcvenli ve verimli bir \u015fekilde ileti\u015fim kurmak i\u00e7in temel servis ve bile\u015fen yap\u0131lar\u0131n\u0131 tasarlayaca\u011f\u0131z.<\/p>\n
\u00d6ncelikle, sisteminizde Node.js ve npm’in kurulu oldu\u011fundan emin olun. Daha sonra Angular CLI’yi kurmak i\u00e7in a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n
\n npm install -g @angular\/cli\n<\/pre>\n<\/code><\/p>\n
Yeni bir Angular projesi olu\u015fturmak i\u00e7in:<\/p>\n
\n ng new ai-creative-suite --routing --style=scss\n cd ai-creative-suite\n<\/pre>\n<\/code><\/p>\n
Bu komut, y\u00f6nlendirme (routing) mod\u00fcl\u00fcne sahip ve SCSS stil dosyalar\u0131 kullanan yeni bir Angular projesi ba\u015flatacakt\u0131r. Projemizin temel mimarisi haz\u0131r oldu\u011funda, AI API'leriyle ileti\u015fim kuracak servisleri olu\u015fturmaya ba\u015flayabiliriz. Angular'\u0131n HttpClient<\/code> mod\u00fcl\u00fc, d\u0131\u015f API'lere HTTP istekleri g\u00f6ndermek i\u00e7in vazge\u00e7ilmezdir. Bu mod\u00fcl\u00fc projenizin ana mod\u00fcl\u00fcnde (genellikle app.module.ts<\/code>) i\u00e7e aktarman\u0131z ve imports<\/code> dizisine eklemeniz gerekir:<\/p>\n\n \/\/ src\/app\/app.module.ts\n import { BrowserModule } from '@angular\/platform-browser';\n import { NgModule } from '@angular\/core';\n import { HttpClientModule } from '@angular\/common\/http'; \/\/ Buray\u0131 ekleyin\n\n import { AppRoutingModule } from '.\/app-routing.module';\n import { AppComponent } from '.\/app.component';\n\n @NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n AppRoutingModule,\n HttpClientModule \/\/ Buray\u0131 da ekleyin\n ],\n providers: [],\n bootstrap: [AppComponent]\n })\n export class AppModule { }\n<\/pre>\n<\/code><\/p>\n
API anahtarlar\u0131n\u0131 do\u011frudan frontend kodunda saklamak g\u00fcvenlik a\u00e7\u0131s\u0131ndan risklidir. Bunun yerine, bu anahtarlar\u0131 sunucu taraf\u0131nda bir proxy servisi arac\u0131l\u0131\u011f\u0131yla y\u00f6netmek veya Google Cloud Functions, AWS Lambda gibi sunucusuz fonksiyonlar kullanmak daha g\u00fcvenli bir yakla\u015f\u0131md\u0131r. Bu sayede API anahtarlar\u0131n\u0131z asla istemci taraf\u0131nda g\u00f6r\u00fcnmez olur. \u015eimdilik geli\u015ftirme ortam\u0131nda .env<\/code> dosyalar\u0131 veya Angular'\u0131n environment.ts<\/code> dosyalar\u0131n\u0131 kullanabiliriz, ancak \u00fcretim ortam\u0131 i\u00e7in proxy \u00e7\u00f6z\u00fcm\u00fcn\u00fc \u015fiddetle tavsiye ederiz.<\/p>\n\n \/\/ src\/environments\/environment.ts\n export const environment = {\n production: false,\n geminiApiKey: 'YOUR_GEMINI_API_KEY',\n imagenApiKey: 'YOUR_IMAGEN_API_KEY',\n veoApiKey: 'YOUR_VEO_API_KEY'\n };\n<\/pre>\n<\/code><\/p>\n
Kullan\u0131c\u0131 aray\u00fcz\u00fc tasar\u0131m\u0131, bir yarat\u0131c\u0131 s\u00fcitin ba\u015far\u0131s\u0131 i\u00e7in kritik \u00f6neme sahiptir. Mod\u00fcler bile\u015fenler kullanarak her AI modeli i\u00e7in ayr\u0131 bir aray\u00fcz geli\u015ftirece\u011fiz. \u00d6rne\u011fin, metin \u00fcretimi i\u00e7in bir TextGeneratorComponent<\/code>, g\u00f6rsel \u00fcretimi i\u00e7in bir ImageGeneratorComponent<\/code> ve video \u00fcretimi i\u00e7in bir VideoGeneratorComponent<\/code> olu\u015fturabiliriz. Bu bile\u015fenler, kullan\u0131c\u0131 girdilerini alacak, servisler arac\u0131l\u0131\u011f\u0131yla AI API'leriyle ileti\u015fim kuracak ve sonu\u00e7lar\u0131 kullan\u0131c\u0131ya sunacakt\u0131r. Ayr\u0131ca, uygulaman\u0131z\u0131n farkl\u0131 cihazlarda (masa\u00fcst\u00fc, tablet, mobil) d\u00fczg\u00fcn g\u00f6r\u00fcnmesini sa\u011flamak i\u00e7in responsive tasar\u0131m prensiplerini uygulamak \u00f6nemlidir. Angular Material veya Bootstrap gibi UI k\u00fct\u00fcphaneleri bu s\u00fcreci b\u00fcy\u00fck \u00f6l\u00e7\u00fcde h\u0131zland\u0131rabilir.<\/p>\n\n \/* src\/app\/app.component.scss *\/\n .container {\n padding: 20px;\n }\n\n @media (max-width: 768px) {\n .container {\n padding: 10px;\n }\n h2 {\n font-size: 1.5em;\n }\n }\n\n @media (max-width: 480px) {\n .container {\n padding: 5px;\n }\n h2 {\n font-size: 1.2em;\n }\n }\n<\/pre>\n<\/code><\/p>\n
Bu temel yap\u0131land\u0131rmalarla, yapay zeka entegrasyonuna haz\u0131r, sa\u011flam bir Angular projesi altyap\u0131s\u0131 kurmu\u015f oluyoruz. \u0130lerleyen b\u00f6l\u00fcmlerde her bir AI modelini bu yap\u0131ya nas\u0131l entegre edece\u011fimizi detayl\u0131ca inceleyece\u011fiz.<\/p>\n
\n Uzman \u0130pucu: API anahtarlar\u0131n\u0131z\u0131 do\u011frudan frontend'de tutmak yerine, g\u00fcvenli bir Node.js veya Python backend servisi olu\u015fturarak API \u00e7a\u011fr\u0131lar\u0131n\u0131 bu servis \u00fczerinden y\u00f6nlendirin. Bu, hem anahtarlar\u0131n\u0131z\u0131 g\u00fcvende tutar hem de ek g\u00fcvenlik katmanlar\u0131 eklemenize olanak tan\u0131r.\n<\/div>\nGemini ile Ak\u0131ll\u0131 Metin \u00dcretimi Nas\u0131l Yap\u0131l\u0131r?<\/h2>\n
Yarat\u0131c\u0131 s\u00fcitimizin ilk ve belki de en temel ta\u015f\u0131, metin \u00fcretme yetene\u011fi olacakt\u0131r. Google'\u0131n Gemini modeli, bu alanda \u00e7\u0131\u011f\u0131r a\u00e7an bir performans sunuyor. Blog yaz\u0131s\u0131 taslaklar\u0131ndan sosyal medya g\u00f6nderilerine, \u00fcr\u00fcn a\u00e7\u0131klamalar\u0131ndan kod par\u00e7ac\u0131klar\u0131na kadar geni\u015f bir metin yelpazesini insan benzeri bir kalitede \u00fcretebilir. Angular uygulamam\u0131zda Gemini'yi entegre ederek, kullan\u0131c\u0131lar\u0131n sadece birka\u00e7 kelimeyle g\u00fc\u00e7l\u00fc metin i\u00e7erikleri olu\u015fturmas\u0131n\u0131 sa\u011flayaca\u011f\u0131z.<\/p>\n
\u0130lk olarak, Gemini API'sini Angular servisimiz arac\u0131l\u0131\u011f\u0131yla nas\u0131l \u00e7a\u011f\u0131raca\u011f\u0131m\u0131z\u0131 tan\u0131mlamal\u0131y\u0131z. Bu servis, kullan\u0131c\u0131n\u0131n girdi\u011fi istem (prompt) metnini alacak ve Gemini API'sine bir HTTP POST iste\u011fi g\u00f6nderecektir. API'den gelen yan\u0131t\u0131 i\u015fleyerek, \u00fcretilen metni bile\u015fenimize geri d\u00f6nd\u00fcrecektir. Projenizde bir GeminiService<\/code> olu\u015ftural\u0131m:<\/p>\n\n ng generate service services\/gemini\n<\/pre>\n<\/code><\/p>\n
Ard\u0131ndan gemini.service.ts<\/code> dosyas\u0131n\u0131 a\u015fa\u011f\u0131daki gibi g\u00fcncelleyelim:<\/p>\n\n \/\/ src\/app\/services\/gemini.service.ts\n import { Injectable } from '@angular\/core';\n import { HttpClient, HttpHeaders } from '@angular\/common\/http';\n import { Observable, throwError } from 'rxjs';\n import { catchError } from 'rxjs\/operators';\n import { environment } from '..\/..\/environments\/environment';\n\n @Injectable({\n providedIn: 'root'\n })\n export class GeminiService {\n private apiUrl = https:\/\/generativelanguage.googleapis.com\/v1beta\/models\/gemini-pro:generateContent?key=${environment.geminiApiKey}<\/code>;\n\n constructor(private http: HttpClient) { }\n\n generateText(prompt: string): Observable {\n const headers = new HttpHeaders({\n 'Content-Type': 'application\/json'\n });\n\n const body = {\n contents: [\n {\n parts: [\n {\n text: prompt\n }\n ]\n }\n ]\n };\n\n return this.http.post(this.apiUrl, body, { headers }).pipe(\n catchError(error => {\n console.error('Gemini API hatas\u0131:', error);\n return throwError(() => new Error('Metin olu\u015fturma ba\u015far\u0131s\u0131z oldu.'));\n })\n );\n }\n }\n<\/pre>\n<\/code><\/p>\n
\u015eimdi bu servisi kullanacak bir bile\u015fen (TextGeneratorComponent<\/code>) olu\u015ftural\u0131m:<\/p>\n\n ng generate component components\/text-generator\n<\/pre>\n<\/code><\/p>\n
Ve text-generator.component.ts<\/code> ile text-generator.component.html<\/code> dosyalar\u0131n\u0131 yap\u0131land\u0131ral\u0131m:<\/p>\n\n \/\/ src\/app\/components\/text-generator\/text-generator.component.ts\n import { Component } from '@angular\/core';\n import { GeminiService } from '..\/..\/services\/gemini.service';\n\n @Component({\n selector: 'app-text-generator',\n templateUrl: '.\/text-generator.component.html',\n styleUrls: ['.\/text-generator.component.scss']\n })\n export class TextGeneratorComponent {\n prompt: string = '';\n generatedText: string = '';\n isLoading: boolean = false;\n error: string = '';\n\n constructor(private geminiService: GeminiService) { }\n\n generateContent(): void {\n if (!this.prompt.trim()) {\n this.error = 'L\u00fctfen bir metin istemi girin.';\n return;\n }\n this.isLoading = true;\n this.error = '';\n this.generatedText = '';\n\n this.geminiService.generateText(this.prompt).subscribe({\n next: (response) => {\n this.generatedText = response.candidates[0]?.content?.parts[0]?.text || 'Metin olu\u015fturulamad\u0131.';\n this.isLoading = false;\n },\n error: (err) => {\n this.error = err.message || 'Bir hata olu\u015ftu.';\n this.isLoading = false;\n }\n });\n }\n }\n<\/pre>\n<\/code><\/p>\n
<\/pre>\n<\/code><\/p>\n
\nGemini ile Ak\u0131ll\u0131 Metin Olu\u015ftur<\/h3>\n
Ne hakk\u0131nda metin olu\u015fturmak istersiniz? Fikrinizi a\u015fa\u011f\u0131ya yaz\u0131n.<\/p>\n
\n