merhaba bugün paylaştığımın konun 2. serisi bu bugün sizlere pythonanywhere üstünden canli websitede google gemini apisini kullanarak nasıl anlık bir chartbot yapabileceğiniz anlatiyorum zaten çok basit

1. adım
https://makersuite.google.com/
siteye girdikte tüm şartları kabul edelim sol tarafta menüde create api diyelim.
2. adım
apimizi oluşturduktan sonra pythonanywhere.com sitesinden bir adet python server hosting oluşturuyoruz flask ile
3. adım
bu kodlari pythonanywhere py dosyasına yzip kaydediyoruz
from flask import Flask, render_template, request, jsonify
import google.generativeai as genai
app = Flask(__name__)
# GenAI yapılandırması ve model oluşturma
genai.configure(api_key="buraya aldığınız token gelecek")
generation_config = {
    "temperature": 0.9,
    "top_p": 1,
    "top_k": 1,
    "max_output_tokens": 2048,
}
safety_settings = [
    {
        "category": "HARM_CATEGORY_HARASSMENT",
        "threshold": "BLOCK_MEDIUM_AND_ABOVE"
    },
    {
        "category": "HARM_CATEGORY_HATE_SPEECH",
        "threshold": "BLOCK_MEDIUM_AND_ABOVE"
    },
    {
        "category": "HARM_CATEGORY_SEXUALLY_EXPLICIT",
        "threshold": "BLOCK_MEDIUM_AND_ABOVE"
    },
    {
        "category": "HARM_CATEGORY_DANGEROUS_CONTENT",
        "threshold": "BLOCK_MEDIUM_AND_ABOVE"
    },
]
model = genai.GenerativeModel(model_name="gemini-pro",
                              generation_config=generation_config,
                              safety_settings=safety_settings)
@app.route('/')
def index():
    return render_template('index.html')
@app.route('/generate', methods=['POST'])
def generate_content():
    data = request.get_json()
    prompt = data.get('prompt', '')
    prompt_parts = [prompt]
    response = model.generate_content(prompt_parts)
    
    return jsonify({'response': response.text})
if __name__ == '__main__':
    app.run(debug=True)
4. adım
tokenimizde ekledikten sonra py dosyamızı kaydediyoruz
5. adım
bir adet templates klasörü oluşturuyoruz ve içersine index.html dosyasını oluştueruyoruz

6. adım
oluşturdugunuz index.html içine
şu kodları yapiştiriyoruz
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Gemini pro AI</title>
    <!-- Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* Dark Mode */
        body {
            background-color: #1a1a1a;
            color: #fff;
        }
        /* Form Styling */
        #contentForm {
            margin-top: 20px;
        }
        #prompt {
            resize: none;
        }
        /* Result Styling */
        #result {
            margin-top: 20px;
        }
        .generated-text {
            margin-bottom: 20px;
            border: 1px solid #ccc;
            padding: 10px;
            position: relative;
            word-wrap: break-word;
        }
        .generated-text pre {
            white-space: pre-wrap;
            background-color: #f8f9fa;
            padding: 10px;
            border-radius: 5px;
            margin-top: 10px;
        }
        .copyButton {
            position: absolute;
            top: 5px;
            right: 5px;
            cursor: pointer;
            font-size: 24px;
            color: #007bff;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="mt-4">Google Gemini pro AI</h1>
        <form id="contentForm" class="mt-4">
            <div class="form-group">
                <label for="prompt">Soru:</label>
                <textarea id="prompt" name="prompt" rows="4" cols="50" class="form-control"></textarea>
            </div>
            <button type="submit" class="btn btn-success">Üret</button>
        </form>
        <div id="result" class="mt-4"></div>
    </div>

    <!-- Bootstrap JS ve jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

    <script>
        document.getElementById('contentForm').addEventListener('submit', function(event) {
            event.preventDefault();
            generateContent();
        });

        function generateContent() {
            var promptText = document.getElementById('prompt').value;

            fetch('/generate', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({prompt: promptText})
            })
            .then(response => response.json())
            .then(data => {
                var resultDiv = document.getElementById('result');
                var generatedText = document.createElement('div');
                generatedText.classList.add('generated-text');
                generatedText.innerHTML = `
                    <pre>${data.response}</pre>
                    <span class="copyButton" onclick="copyTextToClipboard('${data.response}')">📋</span>
                `;
                resultDiv.appendChild(generatedText);
            });
        }

        function copyTextToClipboard(text) {
            const el = document.createElement('textarea');
            el.value = text;
            document.body.appendChild(el);
            el.select();
            document.execCommand('copy');
            document.body.removeChild(el);
            alert('Metin panoya kopyalandı: ' + text);
        }
    </script>
</body>
</html>
kaydediyoruz ve pythonanywhere web kısmına girip serverimizi bir kerwe yeniliyoruz

vee işlemin sonucu



oluşturdugum server örnek

https://geminipro.pythonanywhere.com/