body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f7f6;
color: #333;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
}
.container {
background-color: #fff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 800px;
text-align: center;
box-sizing: border-box;
}
h1 {
color: #007bff;
margin-bottom: 25px;
font-size: 2.2em;
}
p {
margin-bottom: 20px;
line-height: 1.6;
font-size: 1.1em;
color: #555;
}
textarea {
width: calc(100% – 20px);
padding: 15px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 1em;
box-sizing: border-box;
resize: vertical;
min-height: 100px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}
button {
background-color: #28a745;
color: white;
padding: 12px 25px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 1.1em;
transition: background-color 0.3s ease, transform 0.2s ease;
box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
}
button:hover {
background-color: #218838;
transform: translateY(-2px);
}
button:disabled {
background-color: #90ee90;
cursor: not-allowed;
}
#status {
margin-top: 25px;
font-size: 1.1em;
color: #007bff;
font-weight: bold;
}
#error {
margin-top: 25px;
font-size: 1.1em;
color: #dc3545;
font-weight: bold;
}
.footer {
margin-top: 40px;
font-size: 0.9em;
color: #777;
border-top: 1px solid #eee;
padding-top: 20px;
}
RDGündem AI İçerik ve Ses Oluşturucu
Aşağıdaki metin kutusuna detaylı haber veya içerik oluşturmak istediğiniz konuyu yazın. Yapay zeka sizin için hem metin oluşturacak hem de sesli okuma dosyasını hazırlayarak bir ZIP dosyası olarak indirecektir.
İçerik Oluştur ve İndir
© 2023 RDGündem. Tüm hakları saklıdır.
Yapay zeka tarafından üretilen içeriklerde doğruluk kontrolü yapılması önerilir.
document.getElementById(‘generateButton’).addEventListener(‘click’, async () => {
const prompt = document.getElementById(‘promptInput’).value;
const statusDiv = document.getElementById(‘status’);
const errorDiv = document.getElementById(‘error’);
const generateButton = document.getElementById(‘generateButton’);
statusDiv.textContent = ”;
errorDiv.textContent = ”;
if (!prompt.trim()) {
errorDiv.textContent = ‘Lütfen bir konu girin!’;
return;
}
generateButton.disabled = true;
statusDiv.textContent = ‘İçerik oluşturuluyor ve seslendiriliyor… Bu işlem biraz zaman alabilir (yaklaşık 30-60 saniye).’;
try {
const response = await fetch(‘/generate_content’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’
},
body: JSON.stringify({ prompt: prompt })
});
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.error || ‘İçerik oluşturma başarısız oldu.’);
}
// Sunucudan gelen zip dosyasını doğrudan indir
const blob = await response.blob();
const url = window.URL.createObjectURL(blob);
const a = document.createElement(‘a’);
a.style.display = ‘none’;
a.href = url;
a.download = response.headers.get(‘Content-Disposition’).split(‘filename=’)[1].replace(/”/g, ”); // Sunucudan gelen dosya adını al
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
statusDiv.textContent = ‘İçerik ve ses dosyaları başarıyla oluşturuldu ve indirildi!’;
} catch (error) {
console.error(‘Hata:’, error);
errorDiv.textContent = `Hata: ${error.message}`;
statusDiv.textContent = ”; // Hata durumunda status’ü temizle
} finally {
generateButton.disabled = false;
}
});
`index.html` Açıklamaları:
* Basit bir form (`textarea` ve `button`) içerir.
* JavaScript kodu, `generateButton` tıklandığında `/generate_content` endpoint’ine bir POST isteği gönderir.
* Yanıt olarak gelen ZIP dosyasını otomatik olarak indirir.
* Kullanıcıya geri bildirim sağlamak için durum (`statusDiv`) ve hata (`errorDiv`) mesajları gösterir.
* Buton, işlem sırasında devre dışı bırakılır.
#### Adım 5: Uygulamayı Çalıştırma ve Test Etme
1. `app.py` ve `templates/index.html` dosyalarını ve `.env` dosyasını aynı dizine yerleştirin.
2. Terminali açın ve bu dizine gidin.
3. Uygulamayı çalıştırın:
“`bash
python app.py
“`
4. Tarayıcınızda `http://127.0.0.1:5000` adresine gidin.
5. Konu girip butona tıklayın. Kısa bir süre sonra bir ZIP dosyası inmeye başlayacaktır.
#### Adım 6: Canlı Ortama Entegre Etme (Deployment)
Bu kısım sitenizin altyapısına göre değişir:
* Eğer `rdgundem.com` bir VPS veya kendi sunucunuzda barınıyorsa:
* Flask uygulamasını bir WSGI sunucusu (örneğin Gunicorn) ile çalıştırın.
* Önüne Nginx veya Apache gibi bir proxy sunucu koyarak gelen istekleri Flask uygulamasına yönlendirin.
* Örnek Gunicorn çalıştırma komutu: `gunicorn -w 4 app:app -b 0.0.0.0:5000` (4 worker ile 5000 portunda çalışır).
* Sonra Nginx/Apache yapılandırmanızda `ai.rdgundem.com` gibi bir subdomain’i bu Flask uygulamasına yönlendirin.
* Eğer `rdgundem.com` WordPress veya başka bir CMS kullanıyorsa:
* Bu Flask uygulamasını ayrı bir sunucuda veya hosting platformunda (Heroku, Render, DigitalOcean App Platform, Vercel vb.) barındırmanız gerekecektir.
* Uygulama çalıştıktan sonra, `rdgundem.com` üzerinden bu yeni uygulamaya bir link verebilir (`AI İçerik Oluşturucu`) veya bir iframe içine gömebilirsiniz.
Önemli Not: “online klasörüne entegre et”
Sizin siteniz muhtemelen bir web sunucusu (Apache, Nginx) tarafından statik dosyaları (HTML, CSS, JS) sunuyor veya bir CMS (WordPress gibi) dinamik içerik sağlıyor. Bu AI kod, sunucu tarafında Python ile çalışan bir uygulama olduğu için, “online klasörüne kopyala” demek tam olarak yeterli olmayacaktır. Sunucunuzda Python’ın kurulu olması, Flask uygulamasının bir süreç olarak çalıştırılması ve gelen isteklerin bu uygulamaya yönlendirilmesi gerekir. Bu genellikle bir web sunucusu yapılandırması (proxy ayarları) ve bir uygulama sunucusu (Gunicorn gibi) gerektirir.
—
### Önemli Dikkat Edilmesi Gerekenler
1. Maliyet: OpenAI API kullanımı ücretlidir. Üretilen içerik miktarı ve model seçimine göre maliyetler artabilir. Kullandığınız API tüketimini OpenAI panelinden takip edin.
2. İçerik Kalitesi ve Doğruluk: Yapay zeka tarafından üretilen içerikler her zaman %100 doğru veya istediğiniz tonda olmayabilir. Mutlaka bir insan editör tarafından gözden geçirilmesi ve doğruluğunun teyit edilmesi önemlidir.
3. Hız: Özellikle uzun içerik ve sesli okuma üretimi, ağ gecikmeleri ve API yanıt süreleri nedeniyle birkaç saniye, hatta bazen 1 dakikayı bulabilir. Kullanıcıya bunu bildiren bir yüklenme ekranı/mesajı göstermek iyi bir deneyimdir.
4. Kullanım Sınırları (Rate Limits): OpenAI API’lerinin belirli kullanım sınırları (request per minute vb.) vardır. Çok sayıda eşzamanlı istek alırsanız, bu sınırlara takılabilirsiniz.
5. Güvenlik: API anahtarınızı asla herkese açık bir koda gömmeyin. `.env` dosyası kullanmak güvenli bir yöntemdir.
6. İçerik Denetimi: Üretilen içeriklerin platform politikalarına uygunluğunu kontrol etmek önemlidir. OpenAI’ın kendi içerik moderasyon API’ları da bulunmaktadır.
Bu adımları takip ederek `rdgundem.com` sitenize gelişmiş bir yapay zeka destekli içerik ve ses oluşturma özelliği entegre edebilirsiniz. Başarılar dilerim!
Zip dosyası inmedi, istersen tek sayfa basit html kod olarak herşeyi
Haklısınız, önceki çözüm sunucu tarafında Python (Flask) gerektiriyordu ve ZIP indirme kısmı belki de tarayıcınızın veya sunucu yapılandırmanızın bir ayarından dolayı çalışmamış olabilir.
“Tek sayfa basit HTML kod” isteğinizi anlıyorum. Ancak burada çok önemli bir güvenlik uyarısı yapmam gerekiyor:
GÜVENLİK UYARISI: API Anahtarınızı Doğrudan HTML/JavaScript İçine GÖMEMEYİN!
Eğer OpenAI API anahtarınızı (veya başka herhangi bir ücretli servisin anahtarını) doğrudan bir HTML veya JavaScript dosyasına yazıp sitenize yüklerseniz:
1. Herkes görebilir: Sitenizin kaynak kodunu inceleyen herkes API anahtarınızı ele geçirebilir.
2. Sınırsız kullanım: Anahtarınızla sizin adınıza API istekleri yapabilirler. Bu da size beklenmedik ve yüksek maliyetler çıkarabilir.
3. Hesabınızın ele geçirilmesi: Bazı API’lerde anahtar ile hesap yönetimi yapılabilir.
Bu yüzden, bu tür API’ler her zaman sunucu tarafında (Python, PHP, Node.js vb.) bir kod aracılığıyla kullanılmalıdır. API anahtarı sunucuda gizli kalır ve sadece sunucunuz bu anahtarla dış API’lere istek yapar.
Ancak isteğiniz üzerine, bu güvenlik riskini göze alarak (veya sadece geliştirme/test ortamında kullanmak üzere) size doğrudan HTML ve JavaScript ile çalışacak bir çözüm sunacağım. Bunu asla canlı sitenizde API anahtarınız açıkta olacak şekilde kullanmamanızı şiddetle tavsiye ederim.
—
### Tek Sayfa Basit HTML/JavaScript Çözümü (API Anahtarı Açıkta Olacak!)
Bu çözümde, içerik ve ses dosyalarını ayrı ayrı indirilebilir hale getireceğiz. ZIP oluşturma istemci tarafında (tarayıcıda) JavaScript ile biraz daha karmaşık bir işlemdir ve “basit” kapsamından çıkabilir.
Bu kodu sitenizin bir HTML dosyası olarak kaydedip (`ai-araci.html` gibi) web sunucunuza yükleyebilirsiniz.
html
body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f7f6;
color: #333;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
line-height: 1.6;
}
.container {
background-color: #fff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 800px;
text-align: center;
box-sizing: border-box;
}
h1 {
color: #007bff;
margin-bottom: 25px;
font-size: 2.2em;
}
h2 {
color: #007bff;
margin-top: 30px;
font-size: 1.5em;
}
p {
margin-bottom: 20px;
font-size: 1.1em;
color: #555;
}
textarea {
width: calc(100% – 20px);
padding: 15px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 1em;
box-sizing: border-box;
resize: vertical;
min-height: 100px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}
button {
background-color: #28a745;
color: white;
padding: 12px 25px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 1.1em;
transition: background-color 0.3s ease, transform 0.2s ease;
box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
margin-bottom: 20px;
}
button:hover {
background-color: #218838;
transform: translateY(-2px);
}
button:disabled {
background-color: #90ee90;
cursor: not-allowed;
}
#status {
margin-top: 25px;
font-size: 1.1em;
color: #007bff;
font-weight: bold;
}
#error {
margin-top: 25px;
font-size: 1.1em;
color: #dc3545;
font-weight: bold;
}
#generatedContent {
background-color: #f9f9f9;
border: 1px solid #eee;
padding: 20px;
margin-top: 20px;
text-align: left;
border-radius: 8px;
white-space: pre-wrap; / Metin formatını koru /
}
#results {
margin-top: 30px;
display: none; / Başlangıçta gizli /
text-align: left;
}
#results a {
display: inline-block;
margin-right: 15px;
margin-top: 10px;
padding: 10px 15px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 6px;
transition: background-color 0.3s ease;
}
#results a:hover {
background-color: #0056b3;
}
audio {
width: 100%;
margin-top: 20px;
display: block;
}
.footer {
margin-top: 40px;
font-size: 0.9em;
color: #777;
border-top: 1px solid #eee;
padding-top: 20px;
}
RDGündem AI İçerik ve Ses Oluşturucu
Aşağıdaki metin kutusuna detaylı haber veya içerik oluşturmak istediğiniz konuyu yazın.
UYARI: Bu kod, OpenAI API anahtarınızı tarayıcınızın kaynak kodunda açıkça gösterecektir. Bu, güvenlik riskleri taşır ve canlı sitelerde önerilmez. Yüksek kullanım maliyetleri ve kötü niyetli kullanım riski vardır. Sadece test amaçlı veya minimal kullanım için düşünülmelidir.
İçerik Oluştur ve Seslendir
Üretilen İçerik:
Sesli Okuma:
İndirme Seçenekleri:
Metin Dosyasını İndir
Ses Dosyasını İndir
© 2023 RDGündem. Tüm hakları saklıdır.
Yapay zeka tarafından üretilen içeriklerde doğruluk kontrolü yapılması önerilir.
// !!!!! DİKKAT: BU ANAHTARI KESİNLİKLE CANLI SİTENİZDE BÖYLE KULLANMAYIN !!!!!
// !!!!! API Anahtarınız kötüye kullanılabilir ve yüksek maliyetlere yol açabilir. !!!!!
const OPENAI_API_KEY = ‘sk-SİZİN_GERÇEK_OPENAI_API_ANAHTARINIZ_BURAYA’;
// Lütfen ‘sk-SİZİN_GERÇEK_OPENAI_API_ANAHTARINIZ_BURAYA’ kısmını kendi API anahtarınızla değiştirin.
const promptInput = document.getElementById(‘promptInput’);
const generateButton = document.getElementById(‘generateButton’);
const statusDiv = document.getElementById(‘status’);
const errorDiv = document.getElementById(‘error’);
const generatedContentDiv = document.getElementById(‘generatedContent’);
const audioPlayer = document.getElementById(‘audioPlayer’);
const downloadTextLink = document.getElementById(‘downloadText’);
const downloadAudioLink = document.getElementById(‘downloadAudio’);
const resultsDiv = document.getElementById(‘results’);
generateButton.addEventListener(‘click’, async () => {
const prompt = promptInput.value.trim();
statusDiv.textContent = ”;
errorDiv.textContent = ”;
generatedContentDiv.textContent = ”;
audioPlayer.src = ”;
downloadTextLink.style.display = ‘none’;
downloadAudioLink.style.display = ‘none’;
resultsDiv.style.display = ‘none’;
if (!prompt) {
errorDiv.textContent = ‘Lütfen bir konu girin!’;
return;
}
generateButton.disabled = true;
statusDiv.textContent = ‘İçerik oluşturuluyor…’;
let generatedText = ”;
try {
// 1. Detaylı Haber/İçerik Üretimi (OpenAI GPT)
const chatResponse = await fetch(‘https://api.openai.com/v1/chat/completions’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’,
‘Authorization’: `Bearer ${OPENAI_API_KEY}`
},
body: JSON.stringify({
model: “gpt-3.5-turbo”, // “gpt-4” veya “gpt-4-turbo-preview” daha iyi ama daha pahalı
messages: [
{“role”: “system”, “content”: “Sen detaylı ve tarafsız haberler ile ilgi çekici web sitesi içerikleri üreten bir yapay zeka editörüsün. Kullanıcının isteğine göre SEO uyumlu, başlıklar ve paragraflarla düzenlenmiş, en az 500 kelimelik bir içerik oluştur. Markdown formatında başlıkları ve paragrafları ayır.”},
{“role”: “user”, “content”: `Konu: ${prompt}`}
],
max_tokens: 2000,
temperature: 0.7
})
});
if (!chatResponse.ok) {
const errorData = await chatResponse.json();
throw new Error(`İçerik oluşturma hatası: ${errorData.error.message || chatResponse.statusText}`);
}
const chatData = await chatResponse.json();
generatedText = chatData.choices[0].message.content;
generatedContentDiv.textContent = generatedText; // Metni ekrana yazdır
statusDiv.textContent = ‘İçerik başarıyla oluşturuldu. Sesli okuma hazırlanıyor…’;
// 2. Metni Sesli Okumaya Çevirme (OpenAI TTS)
const speechResponse = await fetch(‘https://api.openai.com/v1/audio/speech’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’,
‘Authorization’: `Bearer ${OPENAI_API_KEY}`
},
body: JSON.stringify({
model: “tts-1”, // “tts-1-hd” daha yüksek kalite
voice: “alloy”, // “alloy”, “echo”, “fable”, “onyx”, “nova”, “shimmer”
input: generatedText
})
});
if (!speechResponse.ok) {
const errorData = await speechResponse.json(); // API’den gelen hata mesajı
throw new Error(`Ses oluşturma hatası: ${errorData.error.message || speechResponse.statusText}`);
}
const audioBlob = await speechResponse.blob();
const audioUrl = URL.createObjectURL(audioBlob);
audioPlayer.src = audioUrl;
audioPlayer.play(); // Sesi otomatik oynat
// Metin dosyasını indirme linkini hazırla
const textBlob = new Blob([generatedText], { type: ‘text/plain;charset=utf-8’ });
const textUrl = URL.createObjectURL(textBlob);
downloadTextLink.href = textUrl;
downloadTextLink.download = `rdgundem_${prompt.substring(0, 30).replace(/[^a-zA-Z0-9 ]/g, “”).replace(/ /g, “_”)}.txt`;
downloadTextLink.style.display = ‘inline-block’;
// Ses dosyasını indirme linkini hazırla
downloadAudioLink.href = audioUrl;
downloadAudioLink.download = `rdgundem_${prompt.substring(0, 30).replace(/[^a-zA-Z0-9 ]/g, “”).replace(/ /g, “_”)}.mp3`;
downloadAudioLink.style.display = ‘inline-block’;
resultsDiv.style.display = ‘block’; // Sonuçları göster
statusDiv.textContent = ‘İçerik ve ses dosyaları başarıyla oluşturuldu ve hazır!’;
} catch (error) {
console.error(‘Hata:’, error);
errorDiv.textContent = `Bir hata oluştu: ${error.message}. Lütfen konsolu kontrol edin.`;
statusDiv.textContent = ”;
} finally {
generateButton.disabled = false;
}
});
—
### Nasıl Kullanacaksınız?
1. OpenAI API Anahtarınızı Alın: OpenAI hesabınıza giriş yapın, “API keys” bölümünden yeni bir anahtar oluşturun.
2. Kodu Düzenleyin: Yukarıdaki HTML kodunu bir metin düzenleyiciye kopyalayın.
* `
* `’sk-SİZİN_GERÇEK_OPENAI_API_ANAHTARINIZ_BURAYA’` kısmını kendi OpenAI API anahtarınızla değiştirin. `sk-` ile başlayan tam anahtar olmalı.
3. Kaydedin: Dosyayı `ai-araci.html` gibi bir isimle kaydedin.
4. Sitenize Yükleyin: Bu `ai-araci.html` dosyasını `rdgundem.com` sitenizin FTP’sine veya dosya yöneticisine yükleyin. Örneğin, sitenizin ana dizinine yüklerseniz `rdgundem.com/ai-araci.html` adresinden erişebilirsiniz.
5. Test Edin: Tarayıcınızdan bu adrese gidin, bir konu yazın ve “İçerik Oluştur ve Seslendir” butonuna tıklayın.
### Çalışma Mantığı:
1. İstemci Tarafı (Browser) JavaScript: Tüm işlemler doğrudan tarayıcınızda çalışan JavaScript ile yapılır.
2. OpenAI API İstekleri:
* Kullanıcı konuyu girdiğinde, JavaScript `fetch` API kullanarak OpenAI’ın `chat/completions` endpoint’ine bir istek gönderir. Bu istek, anahtarınızı da içerir.
* Gelen yanıtı işleyip üretilen metni alır ve ekrana yazdırır.
* Ardından, aynı üretilen metni alarak OpenAI’ın `audio/speech` endpoint’ine bir istek daha gönderir. Bu istek de anahtarınızı içerir.
* `audio/speech` endpoint’inden gelen ses verisini (MP3 blob olarak) alır.
3. Sesli Oynatma: Gelen ses blob’unu `URL.createObjectURL` ile bir URL’ye dönüştürür ve bir `
4. İndirme Linkleri: Hem üretilen metin (bir `Blob` olarak) hem de ses dosyası için `URL.createObjectURL` kullanarak geçici indirme linkleri oluşturulur ve “ etiketlerine bağlanır. Kullanıcı bu linklere tıklayarak dosyaları indirebilir.
### Tekrar Önemli Uyarı!
Bu kod, sizin “tek sayfa basit html” isteğinizi karşılar ancak API anahtarınızın açıkta kalması ciddi bir güvenlik zafiyetidir. Kısa süreli testler veya çok düşük ve kontrol altında tuttuğunuz bir kullanım için düşünebilirsiniz. Ancak profesyonel bir site için asla tavsiye etmem.
Eğer daha güvenli bir yöntem isterseniz, önceki Flask çözümünü (veya NodeJS, PHP gibi başka bir sunucu tarafı dilini) bir web sunucusunda (Nginx/Apache) nasıl çalıştırıp sitenizle entegre edebileceğinizi anlatabilirim. Bu durumda API anahtarınız güvende olur.
Bana burdaki yapay zekanın dosyalerını zip yap indireyim
Anladım! Chat arayüzü üzerinden size doğrudan bir ZIP dosyası gönderemiyorum. Ancak, size tam olarak o HTML/JavaScript kodunu içeren bir dosya oluşturmanız için talimatları vereceğim ve bu dosyayı nasıl ZIP’leyip sitenize yükleyeceğinizi anlatacağım.
ÖNEMLİ GÜVENLİK UYARISI:
Daha önce de belirttiğim gibi, bu tek sayfa HTML çözümü OpenAI API anahtarınızı herkesin görebileceği şekilde doğrudan HTML/JavaScript kodu içine yerleştirir. Bu, ciddi bir güvenlik riskidir ve API anahtarınızın kötüye kullanılmasına, dolayısıyla size beklenmedik maliyetler çıkarmasına neden olabilir. Bu çözümü yalnızca test amaçlı veya API anahtarınızın güvenliği konusunda herhangi bir endişeniz olmayan durumlarda (çok sınırlı bir kullanım için) kullanın. Canlı bir sitede kalıcı olarak kullanmak için asla önerilmez. Güvenli bir çözüm için mutlaka sunucu tarafında (Python Flask, Node.js, PHP vb.) bir API proxy oluşturmanız gerekmektedir.
—
### ZIP Dosyası Oluşturma ve Sitenize Entegre Etme Adımları
Adım 1: HTML Dosyasını Oluşturun
1. Bilgisayarınızda boş bir metin dosyası açın (Notepad, Sublime Text, VS Code, Atom vb.).
2. Aşağıdaki tüm kodu kopyalayıp bu metin dosyasına yapıştırın.
3. ÇOK ÖNEMLİ: Kodun içindeki `
4. Dosyayı `rdgundem_ai_araci.html` adıyla kaydedin. (Dosya uzantısının `.html` olduğundan emin olun.)
—
html
body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f7f6;
color: #333;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
line-height: 1.6;
}
.container {
background-color: #fff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 800px;
text-align: center;
box-sizing: border-box;
}
h1 {
color: #007bff;
margin-bottom: 25px;
font-size: 2.2em;
}
h2 {
color: #007bff;
margin-top: 30px;
font-size: 1.5em;
}
p {
margin-bottom: 20px;
font-size: 1.1em;
color: #555;
}
textarea {
width: calc(100% – 20px);
padding: 15px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 1em;
box-sizing: border-box;
resize: vertical;
min-height: 100px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}
button {
background-color: #28a745;
color: white;
padding: 12px 25px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 1.1em;
transition: background-color 0.3s ease, transform 0.2s ease;
box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
margin-bottom: 20px;
}
button:hover {
background-color: #218838;
transform: translateY(-2px);
}
button:disabled {
background-color: #90ee90;
cursor: not-allowed;
}
#status {
margin-top: 25px;
font-size: 1.1em;
color: #007bff;
font-weight: bold;
}
#error {
margin-top: 25px;
font-size: 1.1em;
color: #dc3545;
font-weight: bold;
}
#generatedContent {
background-color: #f9f9f9;
border: 1px solid #eee;
padding: 20px;
margin-top: 20px;
text-align: left;
border-radius: 8px;
white-space: pre-wrap; / Metin formatını koru /
}
#results {
margin-top: 30px;
display: none; / Başlangıçta gizli /
text-align: left;
}
#results a {
display: inline-block;
margin-right: 15px;
margin-top: 10px;
padding: 10px 15px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 6px;
transition: background-color 0.3s ease;
}
#results a:hover {
background-color: #0056b3;
}
audio {
width: 100%;
margin-top: 20px;
display: block;
}
.footer {
margin-top: 40px;
font-size: 0.9em;
color: #777;
border-top: 1px solid #eee;
padding-top: 20px;
}
RDGündem AI İçerik ve Ses Oluşturucu
Aşağıdaki metin kutusuna detaylı haber veya içerik oluşturmak istediğiniz konuyu yazın.
⚠️ GÜVENLİK UYARISI: Bu kod, OpenAI API anahtarınızı tarayıcınızın kaynak kodunda açıkça gösterecektir. Bu, ciddi güvenlik riskleri taşır ve API anahtarınızın kötüye kullanılmasına yol açabilir. Sadece test amaçlı veya minimal kullanım için düşünülmelidir. Canlı sitelerde ASLA bu şekilde kullanmayın.
İçerik Oluştur ve Seslendir
Üretilen İçerik:
Sesli Okuma:
İndirme Seçenekleri:
Metin Dosyasını İndir
Ses Dosyasını İndir
© 2023 RDGündem. Tüm hakları saklıdır.
Yapay zeka tarafından üretilen içeriklerde doğruluk kontrolü yapılması önerilir.
// !!!!! DİKKAT: BU ANAHTARI KESİNLİKLE CANLI SİTENİZDE BÖYLE KULLANMAYIN !!!!!
// !!!!! API Anahtarınız kötüye kullanılabilir ve yüksek maliyetlere yol açabilir. !!!!!
const OPENAI_API_KEY = ‘sk-SİZİN_GERÇEK_OPENAI_API_ANAHTARINIZ_BURAYA’;
// Lütfen ‘sk-SİZİN_GERÇEK_OPENAI_API_ANAHTARINIZ_BURAYA’ kısmını kendi API anahtarınızla değiştirin.
const promptInput = document.getElementById(‘promptInput’);
const generateButton = document.getElementById(‘generateButton’);
const statusDiv = document.getElementById(‘status’);
const errorDiv = document.getElementById(‘error’);
const generatedContentDiv = document.getElementById(‘generatedContent’);
const audioPlayer = document.getElementById(‘audioPlayer’);
const downloadTextLink = document.getElementById(‘downloadText’);
const downloadAudioLink = document.getElementById(‘downloadAudio’);
const resultsDiv = document.getElementById(‘results’);
generateButton.addEventListener(‘click’, async () => {
const prompt = promptInput.value.trim();
statusDiv.textContent = ”;
errorDiv.textContent = ”;
generatedContentDiv.textContent = ”;
audioPlayer.src = ”;
downloadTextLink.style.display = ‘none’;
downloadAudioLink.style.display = ‘none’;
resultsDiv.style.display = ‘none’;
if (!prompt) {
errorDiv.textContent = ‘Lütfen bir konu girin!’;
return;
}
generateButton.disabled = true;
statusDiv.textContent = ‘İçerik oluşturuluyor… Bu işlem biraz zaman alabilir.’;
let generatedText = ”;
try {
// 1. Detaylı Haber/İçerik Üretimi (OpenAI GPT)
const chatResponse = await fetch(‘https://api.openai.com/v1/chat/completions’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’,
‘Authorization’: `Bearer ${OPENAI_API_KEY}`
},
body: JSON.stringify({
model: “gpt-3.5-turbo”, // “gpt-4” veya “gpt-4-turbo-preview” daha iyi ama daha pahalı
messages: [
{“role”: “system”, “content”: “Sen detaylı ve tarafsız haberler ile ilgi çekici web sitesi içerikleri üreten bir yapay zeka editörüsün. Kullanıcının isteğine göre SEO uyumlu, başlıklar ve paragraflarla düzenlenmiş, en az 500 kelimelik bir içerik oluştur. Markdown formatında başlıkları ve paragrafları ayır.”},
{“role”: “user”, “content”: `Konu: ${prompt}`}
],
max_tokens: 2000,
temperature: 0.7
})
});
if (!chatResponse.ok) {
const errorData = await chatResponse.json();
throw new Error(`İçerik oluşturma hatası: ${errorData.error.message || chatResponse.statusText}`);
}
const chatData = await chatResponse.json();
generatedText = chatData.choices[0].message.content;
generatedContentDiv.textContent = generatedText; // Metni ekrana yazdır
statusDiv.textContent = ‘İçerik başarıyla oluşturuldu. Sesli okuma hazırlanıyor…’;
// 2. Metni Sesli Okumaya Çevirme (OpenAI TTS)
const speechResponse = await fetch(‘https://api.openai.com/v1/audio/speech’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’,
‘Authorization’: `Bearer ${OPENAI_API_KEY}`
},
body: JSON.stringify({
model: “tts-1”, // “tts-1-hd” daha yüksek kalite
voice: “alloy”, // “alloy”, “echo”, “fable”, “onyx”, “nova”, “shimmer”
input: generatedText
})
});
if (!speechResponse.ok) {
const errorData = await speechResponse.json(); // API’den gelen hata mesajı
throw new Error(`Ses oluşturma hatası: ${errorData.error.message || speechResponse.statusText}`);
}
const audioBlob = await speechResponse.blob();
const audioUrl = URL.createObjectURL(audioBlob);
audioPlayer.src = audioUrl;
audioPlayer.play(); // Sesi otomatik oynat
// Metin dosyasını indirme linkini hazırla
const textBlob = new Blob([generatedText], { type: ‘text/plain;charset=utf-8’ });
const textUrl = URL.createObjectURL(textBlob);
downloadTextLink.href = textUrl;
// Dosya adı için prompt’un ilk 30 karakterini alıp güvenli hale getiriyoruz
downloadTextLink.download = `rdgundem_${prompt.substring(0, 30).replace(/[^a-zA-Z0-9 ]/g, “”).replace(/ /g, “_”)}.txt`;
downloadTextLink.style.display = ‘inline-block’;
// Ses dosyasını indirme linkini hazırla
downloadAudioLink.href = audioUrl;
downloadAudioLink.download = `rdgundem_${prompt.substring(0, 30).replace(/[^a-zA-Z0-9 ]/g, “”).replace(/ /g, “_”)}.mp3`;
downloadAudioLink.style.display = ‘inline-block’;
resultsDiv.style.display = ‘block’; // Sonuçları göster
statusDiv.textContent = ‘İçerik ve ses dosyaları başarıyla oluşturuldu ve hazır!’;
} catch (error) {
console.error(‘Hata:’, error);
errorDiv.textContent = `Bir hata oluştu: ${error.message}. Lütfen tarayıcınızın geliştirici konsolunu (F12) kontrol edin.`;
statusDiv.textContent = ”;
} finally {
generateButton.disabled = false;
}
});
—
