Azure OpenAI kullanarak çok modüllü görüntü işleme sohbeti uygulamalarını kullanmaya başlama

Bu makalede, bir sohbet uygulamasında kullanıcı iletilerine ve karşıya yüklenen görüntülere yanıt oluşturmak için Azure OpenAI çok modüllü modellerinin nasıl kullanılacağı gösterilmektedir. Bu sohbet uygulaması örneği, Azure OpenAI kaynaklarını sağlamak ve uygulamayı Azure Geliştirici CLI'sini kullanarak Azure Container Apps dağıtmak için gereken tüm altyapıyı ve yapılandırmayı da içerir.

Bu makaledeki yönergeleri izleyerek şunları yapacaksınız:

• Kimlik doğrulaması için yönetilen kimlik kullanan bir Azure Kapsayıcısı sohbet uygulaması dağıtın.
• Sohbet akışının bir parçası olarak kullanılacak görüntüleri karşıya yükleyin.
• OpenAI kitaplığının Yanıtlar API'sini kullanarak Azure OpenAI çokmodlu Büyük Dil Modeli (LLM) ile sohbet edin.

Bu makaleyi tamamladıktan sonra, özel kodunuzla yeni projeyi değiştirmeye başlayabilirsiniz.

Not

Bu makalede, makaledeki örnekler ve kılavuzlar için temel olarak bir veya daha fazla yapay zeka uygulaması şablonu kullanılır. Yapay zeka uygulama şablonları, yapay zeka uygulamalarınız için yüksek kaliteli bir başlangıç noktası sağlamaya yardımcı olan, bakımlı, kolay dağıtılan başvuru uygulamaları sağlar.

Mimariye genel bakış

Aşağıdaki diyagramda sohbet uygulamasının basit bir mimarisi gösterilmiştir:

Sohbet uygulaması bir Azure Kapsayıcı Uygulaması olarak çalışıyor. Uygulama, api anahtarı yerine üretimdeki Azure OpenAI ile kimlik doğrulaması yapmak için Microsoft Entra ID aracılığıyla yönetilen kimlik kullanır. Geliştirme sırasında uygulama, Azure Geliştirici CLI kimlik bilgileri ve API anahtarları dahil olmak üzere birden çok kimlik doğrulama yöntemini destekler.

Uygulama mimarisi aşağıdaki hizmetlere ve bileşenlere dayanır:

• Azure OpenAI kullanıcının sorgularını gönderdiğimiz yapay zeka sağlayıcısını temsil eder.
• Azure Container Apps uygulamanın barındırıldığı kapsayıcı ortamıdır.
• Yönetilen Kimlik, üstün kalitede güvenliği sağlamamıza yardımcı olur ve bir geliştirici olarak bir gizliyi güvenli bir şekilde yönetme ihtiyacını ortadan kaldırır.
• Bicep dosyaları OpenAI, Azure Container Apps, Azure Container Registry, Azure Azure Log Analytics ve rol tabanlı erişim denetimi (RBAC) rolleri gibi Azure kaynakları sağlamak için kullanılır.
• Karşıya yüklenen görüntü dosyalarıyla kullanıcı iletilerine yanıt oluşturmak için paketini kullanan Python openai uygulaması.
• ReadableStream üzerinden JSON Çizgileri kullanarak arka uçtan yanıt akışı sağlayan temel bir HTML/JavaScript ön ucu.

Maliyet

Bu örnekte fiyatlandırmayı mümkün olduğunca düşük tutmak amacıyla kaynakların çoğu temel veya tüketim fiyatlandırma katmanını kullanır. Hedeflenen kullanımınıza göre katman düzeyinizi gerektiği gibi değiştirin. Ücretlendirmeyi durdurmak için makaleyle işiniz bittiğinde kaynakları silin.

Örnek depodaki maliyet hakkında daha fazla bilgi edinin.

Önkoşullar

Bu makaleyi tamamlamak için gereken tüm bağımlılıklarla birlikte bir geliştirme kapsayıcısı ortamı sağlanır. Geliştirme kapsayıcısını GitHub Codespaces'ta (tarayıcıda) veya Visual Studio Code kullanarak yerel olarak çalıştırabilirsiniz.

Bu makaleyi kullanmak için aşağıdaki önkoşulları yerine getirmeniz gerekir:

GitHub Codespaces (önerilir)

• Azure aboneliği - Ücretsiz bir abonelik oluştur

• Azure hesap izinleri - Azure Hesabınızın Microsoft.Authorization/roleAssignments/write veya Sahip gibi izinleri olmalıdır.

• GitHub hesabı

Visual Studio Code

• Azure aboneliği - Ücretsiz bir abonelik oluştur

• Azure hesap izinleri - Azure Hesabınızın Microsoft.Authorization/roleAssignments/write veya Sahip gibi izinleri olmalıdır.

• Azure Geliştirici CLI

• Docker Desktop - Henüz çalışmıyorsa Docker Desktop'ı başlatın

• Visual Studio Code

• Dev Kapsayıcı Uzantısı

Açık geliştirme ortamı

Bu makaleyi tamamlamak için gerekli tüm bağımlılıkları içeren önceden yapılandırılmış bir geliştirme ortamı dağıtmak için aşağıdaki yönergeleri kullanın.

GitHub Codespaces (önerilir)

GitHub Codespaces, kullanıcı arabirimi olarak Web için Visual Studio Code ile GitHub tarafından yönetilen bir geliştirme kapsayıcısı çalıştırır. En basit geliştirme ortamı için GitHub Codespaces'ı kullanarak bu makaleyi tamamlamak için doğru geliştirici araçlarını ve bağımlılıklarını önceden yüklemiş olursunuz.

Önemli

Tüm GitHub hesapları Codespaces'ı iki temel örnekle her ay 60 saate kadar ücretsiz olarak kullanabilir. Daha fazla bilgi için, GitHub Codespaces'in aylık dahil depolama ve çekirdek saatleri bölümüne bakın.

main GitHub deposunun Azure-Samples/openai-chat-vision-quickstart dalında yeni bir GitHub Codespace oluşturmak için aşağıdaki adımları kullanın.

1. Aşağıdaki düğmeye sağ tıklayın ve Bağlantıyı yeni pencerede aç'ı seçin. Bu eylem, geliştirme ortamına ve gözden geçirilebilecek belgelere sahip olmanıza olanak tanır.

   

2. Kod alanı oluştur sayfasında Yeni kod alanı oluştur'u gözden geçirin ve seçin

3. Kod alanının başlamasını bekleyin. Bu başlatma işlemi birkaç dakika sürebilir.

4. Ekranın alt kısmındaki terminalde Azure Geliştirici CLI'sı ile Azure oturum açın.

   azd auth login
   

5. Kodu terminalden kopyalayın ve bir tarayıcıya yapıştırın. Azure hesabınızla kimlik doğrulaması yapmak için yönergeleri izleyin.

Bu makaledeki kalan görevler bu geliştirme konteyneri bağlamında gerçekleşir.

Visual Studio Code

Visual Studio Code için Dev Kapsayıcıları uzantısı yerel makinenize Docker yüklenmesini gerektirir. Uzantı, bu makaleyi tamamlamak için doğru geliştirici araçları ve bağımlılıkları önceden yüklenmiş olan Docker ana makinesini kullanarak geliştirme kapsayıcısını yerel olarak barındırır.

1. Proje için bilgisayarınızda yeni bir yerel dizin oluşturun.

   mkdir my-chat-vision-app
   

2. Oluşturduğunuz dizine gidin.

   cd my-chat-vision-app
   

3. bu dizinde Visual Studio Code açın:

   code .
   

4. Visual Studio Code'de yeni bir terminal açın.

5. GitHub deposunu yerel bilgisayarınıza getirmek için aşağıdaki AZD komutunu çalıştırın.

   azd init -t openai-chat-vision-quickstart
   

6. Projeyi geliştirme kapsayıcısında açmak için Komut Paleti'ni açın, Geliştirme Kapsayıcıları: Kapsayıcıda Klasör Aç'ı arayın ve seçin. Devam etmeden önce geliştirme kapsayıcısı açılana kadar bekleyin.

7. Azure Geliştirici CLI'sı ile Azure oturum açın.

   azd auth login
   

8. Projedeki kalan alıştırmalar, bu geliştirme kapsayıcısının bağlamında gerçekleşir.

Dağıt ve çalıştır

Örnek depo, sohbet uygulaması Azure dağıtımı için tüm kod ve yapılandırma dosyalarını içerir. Aşağıdaki adımlar, örnek sohbet uygulaması Azure dağıtım işleminde size yol gösterir.

sohbet uygulamasını Azure dağıtma

Önemli

Maliyetleri düşük tutmak için bu örnek, çoğu kaynak için temel veya tüketim fiyatlandırma katmanlarını kullanır. Gerektiği gibi seviyeyi ayarlayın ve ücretlerden kaçınmak için işiniz tamamlandığında kaynakları silin.

1. kaynak sağlama ve kaynak kodu dağıtımı Azure için aşağıdaki Azure Geliştirici CLI komutunu çalıştırın:

   azd up
   

2. istemleri yanıtlamak için aşağıdaki tabloyu kullanın:

   İstem	Yanıt
   Ortam adı	Kısa ve küçük yazın. Adınızı veya diğer adınızı ekleyin. Örneğin, chat-vision. Kaynak grubu adının bir parçası olarak kullanılır.
   Abonelik	Kaynakları oluşturacağınız aboneliği seçin.
   Konum (barındırma için)	Listeden size yakın bir konum seçin.
   Azure OpenAI modelinin konumu	Listeden size yakın bir konum seçin. İlk konumunuzla aynı konum kullanılabiliyorsa bunu seçin.

3. Uygulama dağıtılana kadar bekleyin. Dağıtımın tamamlanması genellikle 5 ile 10 dakika arasında sürer.

Büyük Dil Modeline soru sormak için sohbet uygulamasını kullanma

1. Terminal, başarılı uygulama dağıtımından sonra bir URL görüntüler.

2. Sohbet uygulamasını tarayıcıda açmak için etiketli Deploying service web URL'yi seçin.

   

3. Tarayıcıda, Dosya Seç'e tıklayıp bir resim seçerek bir resim yükleyin.

4. Karşıya yüklenen görüntü hakkında "Görüntü ne hakkında?" gibi bir soru sorun.

5. Yanıt Azure OpenAI'den gelir ve sonuç görüntülenir.

Örnek kodu keşfetme

Bu örnek, kullanıcı iletilerine ve yüklenen görüntülere yanıt oluşturmak için Azure OpenAI çok modelli bir model kullanır.

Yüklenen görüntüyü ön uçta Base64 formatında kodlama

Karşıya yüklenen görüntünün, iletinin bir parçası olarak doğrudan Veri URI'si olarak kullanılabilmesi için Base64 kodlanmış olması gerekir.

Örnekte, dosyanın etiketindeki scriptsrc/quartapp/templates/index.html aşağıdaki ön uç kod parçacığı bu işlevi işler. toBase64 ok işlevi, karşıya yüklenen görüntü dosyasını base64 kodlamalı bir dize olarak zaman uyumsuz biçimde okumak için FileReader yönteminin readAsDataURL kullanır.

    const toBase64 = file => new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = reject;
    });

İşlev toBase64 , formun submit olayındaki bir dinleyici tarafından çağrılır.

Olay dinleyicisi submit , sohbet etkileşim akışının tamamını işler. Kullanıcı bir ileti gönderdiğinde aşağıdaki akış gerçekleşir:

1. Karşıya yüklenen görüntü dosyasını (varsa) alır ve Base64 olarak kodlar
2. Sohbette kullanıcı mesajını oluşturur ve yüklenen görüntü dahil görüntüler.
3. "Yazma..." göstergesi ile bir yardımcı ileti kapsayıcısı hazırlar
4. Kullanıcının iletisini Yanıtlar API biçiminde ileti geçmişi dizisine ekler
5. İleti geçmişi ve bağlamı (Base64 ile kodlanmış görüntü ve dosya adı dahil) ile uç noktaya bir fetch POST isteği /chat/stream gönderir
6. Her bir metin değişikliğini artımlı olarak görüntülemek için akış halindeki JSON satırları yanıtını işler.
7. Akış sırasındaki hataları işler
8. Kullanıcıların yanıtı duyabilmesi için yanıtın tamamını aldıktan sonra bir konuşma çıkışı düğmesi ekler
9. Giriş alanını temizler ve sonraki ileti için odağı döndürür

form.addEventListener("submit", async function(e) {
    e.preventDefault();

    // Hide the no-messages-heading when a message is added
    document.getElementById("no-messages-heading").style.display = "none";

    const file = document.getElementById("file").files[0];
    const fileData = file ? await toBase64(file) : null;

    const message = messageInput.value;

    const userTemplateClone = userTemplate.content.cloneNode(true);
    userTemplateClone.querySelector(".message-content").innerText = message;
    if (file) {
        const img = document.createElement("img");
        img.src = fileData;
        userTemplateClone.querySelector(".message-file").appendChild(img);
    }
    targetContainer.appendChild(userTemplateClone);

    const assistantTemplateClone = assistantTemplate.content.cloneNode(true);
    let messageDiv = assistantTemplateClone.querySelector(".message-content");
    targetContainer.appendChild(assistantTemplateClone);

    messages.push({
        "role": "user",
        "content": [{"type": "input_text", "text": message}]
    });

    try {
        messageDiv.scrollIntoView();
        const response = await fetch("/chat/stream", {
            method: "POST",
            headers: {"Content-Type": "application/json"},
            body: JSON.stringify({
                messages: messages,
                context: {
                    file: fileData,
                    file_name: file ? file.name : null
                }
            })
        });

        if (!response.ok || !response.body) {
            throw new Error(`Request failed (${response.status})`);
        }

        let answer = "";
        for await (const chunk of readNDJSONStream(response.body)) {
            if (chunk.type === "error" || chunk.type === "response.failed") {
                messageDiv.innerHTML = "Error: " + (chunk.error || "Unknown error");
                break;
            }
            if (chunk.type === "response.output_text.delta") {
                // Clear out the DIV if its the first answer chunk we've received
                if (answer == "") {
                    messageDiv.innerHTML = "";
                }
                answer += chunk.delta;
                messageDiv.innerHTML = converter.makeHtml(answer);
                messageDiv.scrollIntoView();
            }
        }

        messages.push({
            "role": "assistant",
            "content": [{"type": "output_text", "text": answer}]
        });

        messageInput.value = "";

        const speechOutput = document.createElement("speech-output-button");
        speechOutput.setAttribute("text", answer);
        messageDiv.appendChild(speechOutput);
        messageInput.focus();
    } catch (error) {
        messageDiv.innerHTML = "Error: " + error;
    }
});

Görüntüyü arka uçla işleme

src\quartapp\chat.py dosyasında, anahtarsız kimlik doğrulaması yapılandırıldıktan sonra görüntü işleme için arka uç kodu başlar.

Not

OpenAI'yi Azure kimlik doğrulaması ve yetkilendirme için anahtarsız bağlantıları kullanma hakkında daha fazla bilgi için Azure OpenAI güvenlik yapı taşını kullanmaya başlama Microsoft Learn makalesine bakın.

Kimlik doğrulama yapılandırması

İşlev, configure_openai() uygulama istekleri sunmadan önce OpenAI istemcisini ayarlar. Ortam değişkenlerini temel alarak kimlik doğrulamasını yapılandırmak için Quart'un @bp.before_app_serving dekoratörü kullanılır. Bu esnek sistem, geliştiricilerin kodu değiştirmeden farklı bağlamlarda çalışmasını sağlar.

Kimlik doğrulama modları açıklandı

• Yerel geliştirme (OPENAI_HOST=local): Kimlik doğrulaması olmadan yerel OpenAI uyumlu bir API hizmetine (Ollama veya LocalAI gibi) bağlanır. İnternet veya API maliyetleri olmadan test yapmak için bu modu kullanın.
• Azure OPENAI with API key (AZURE_OPENAI_KEY_FOR_CHATVISION ortam değişkeni): Kimlik doğrulaması için API anahtarı kullanır. API anahtarları el ile döndürme gerektirdiğinden ve kullanıma sunulduğunda güvenlik riskleri oluşturduğundan üretimde bu moddan kaçının. Azure CLI kimlik bilgileri olmadan docker kapsayıcısı içinde yerel test için kullanın.
• Yönetilen Kimlik ile Üretim (RUNNING_IN_PRODUCTION=true): Kapsayıcı uygulamasının yönetilen kimliği aracılığıyla Azure OpenAI ile kimlik doğrulaması yapmak için ManagedIdentityCredential kullanmaktadır. Bu yöntem, gizli bilgileri yönetme gereksinimini ortadan kaldırdığından prodüksiyon için önerilir. Azure Container Apps yönetilen kimliği otomatik olarak sağlar ve Bicep aracılığıyla dağıtım sırasında izinler verir.
• development with Azure CLI (varsayılan mod): Yerel olarak oturum açmış Azure CLI kimlik bilgilerini kullanarak Azure OpenAI ile kimlik doğrulaması yapmak için AzureDeveloperCliCredential kullanır. Bu mod, API anahtarlarını yönetmeden yerel geliştirmeyi basitleştirir.

Önemli uygulama ayrıntıları

• get_bearer_token_provider() işlevi Azure kimlik bilgilerini yeniler ve bunları taşıyıcı belirteç olarak kullanır.
• Azure OpenAI uç noktası yolu, Microsoft Döküm Modelleri için genel olarak kullanılabilen OpenAI uyumlu uç nokta olan /openai/v1/ ile sona erer.
• Quart, asenkron bir web uygulaması çatısı olduğundan fonksiyon asenkron çalışır. Quart, istek işleyicilerinin zaman uyumsuz olmasını sağlar, bu nedenle uygulama yavaş LLM API yanıtları beklerken sunucu diğer istekleri işlemeye devam edebilir.

kimlik doğrulama kurulum kodunun tamamı aşağıdadır chat.py:

@bp.before_app_serving
async def configure_openai():
    bp.model_name = os.getenv("OPENAI_MODEL", "gpt-4o")
    openai_host = os.getenv("OPENAI_HOST", "azure")

    if openai_host == "local":
        bp.openai_client = AsyncOpenAI(api_key="no-key-required", base_url=os.getenv("LOCAL_OPENAI_ENDPOINT"))
        current_app.logger.info("Using local OpenAI-compatible API service with no key")
    elif os.getenv("AZURE_OPENAI_KEY_FOR_CHATVISION"):
        bp.openai_client = AsyncOpenAI(
            base_url=os.environ["AZURE_OPENAI_ENDPOINT"].rstrip("/") + "/openai/v1",
            api_key=os.getenv("AZURE_OPENAI_KEY_FOR_CHATVISION"),
        )
        current_app.logger.info("Using Azure OpenAI with key")
    elif os.getenv("RUNNING_IN_PRODUCTION"):
        client_id = os.environ["AZURE_CLIENT_ID"]
        azure_credential = ManagedIdentityCredential(client_id=client_id)
        token_provider = get_bearer_token_provider(azure_credential, "https://cognitiveservices.azure.com/.default")
        bp.openai_client = AsyncOpenAI(
            base_url=os.environ["AZURE_OPENAI_ENDPOINT"].rstrip("/") + "/openai/v1",
            api_key=token_provider,
        )
        current_app.logger.info("Using Azure OpenAI with managed identity credential for client ID %s", client_id)
    else:
        tenant_id = os.environ["AZURE_TENANT_ID"]
        azure_credential = AzureDeveloperCliCredential(tenant_id=tenant_id)
        token_provider = get_bearer_token_provider(azure_credential, "https://cognitiveservices.azure.com/.default")
        bp.openai_client = AsyncOpenAI(
            base_url=os.environ["AZURE_OPENAI_ENDPOINT"].rstrip("/") + "/openai/v1",
            api_key=token_provider,
        )
        current_app.logger.info("Using Azure OpenAI with az CLI credential for tenant ID: %s", tenant_id)

Sohbet işleyici işlevi

İşlev, chat_handler() uç noktaya gönderilen /chat/stream sohbet isteklerini işler. JSON yüküne sahip bir POST isteği alır.

JSON yükü şunları içerir:

• iletiler: Konuşma geçmişinin listesi. Her mesajın bir role ("kullanıcı" veya "yardımcı") ve bir content (Yanıtlar API'si giriş formatını kullanan içerik parçaları dizisi) vardır.
• bağlam: İşleme için ek veriler, örneğin:
  • file: Base64 ile kodlanmış görüntü verileri (örneğin, data:image/png;base64,...).
  • file_name: Karşıya yüklenen görüntünün özgün dosya adı (görüntü türünü günlüğe kaydetmek veya tanımlamak için kullanışlıdır).

İşleyici, ileti geçmişini ve görüntü verilerini ayıklar. Karşıya resim yüklenmezse, resim değeri null olur ve kod bu durumu işler.

@bp.post("/chat/stream")
async def chat_handler():
    request_json = await request.get_json()
    request_messages = request_json["messages"]
    # Get the base64 encoded image from the request context
    # This will be None if no image was uploaded
    image = request_json["context"]["file"]

Görü istekleri için giriş dizisi oluşturma

response_stream() işlevi, Azure OpenAI Yanıtları API'sine gönderilen giriş dizisini hazırlar. Dekoratör, @stream_with_context yanıtın akışını yaparken istek bağlamını korur.

Giriş hazırlama mantığı

1. Konuşma geçmişiyle başlayın: İşlev, en son ileti (all_input) dışında önceki tüm iletileri içeren ile request_messages[0:-1]başlar. İletiler zaten ön uçtan Yanıtlar API biçimindedir.
2. Geçerli kullanıcı iletisini görüntü varlığına göre işleyebilir:
   • Resimle: Kullanıcının mevcut içerik dizisine bir input_image içerik bölümü ekleyin.
   • Resim olmadan: Kullanıcının iletisini olduğu gibi ekleyin.

    @stream_with_context
    async def response_stream():
        # This sends all messages, so API request may exceed token limits
        all_input = list(request_messages[0:-1])

        # Add the current user message, appending image if provided
        if image:
            user_content = request_messages[-1]["content"] + [{"type": "input_image", "image_url": image}]
            all_input.append({"role": "user", "content": user_content})
        else:
            all_input.append(request_messages[-1])

Ardından bp.openai_client.responses.create Azure OpenAI Yanıtları API'sini çağırır ve yanıtı akışa alır. store=False parametresi API'ye yanıtları sunucuda depolamamasını bildirir ve çağrıyı durum bilgisiz hale getirir.

        openai_stream = await bp.openai_client.responses.create(
            model=bp.model_name,
            input=all_input,
            stream=True,
            temperature=0.3,
            store=False,
        )

Son olarak, yanıt istemciye geri aktarılır. Yanıtlar API'si birçok olay türü yayar, ancak oluşturulan metin akışı için yalnızca response.output_text.delta olay gereklidir. Hata olayları günlüğe kaydedilir ve ön yüze iletilir.

        try:
            async for event in openai_stream:
                if event.type == "response.output_text.delta":
                    yield json.dumps({"type": event.type, "delta": event.delta}, ensure_ascii=False) + "\n"
                elif event.type in ("response.failed", "error"):
                    current_app.logger.error("Responses API error: %s", event)
                    yield json.dumps({"type": event.type}, ensure_ascii=False) + "\n"
        except Exception as e:
            current_app.logger.exception("Error in response stream")
            yield json.dumps({"error": str(e)}, ensure_ascii=False) + "\n"

    return Response(response_stream())

Ön uç kitaplıkları ve fonksiyonları

Ön uç, etkileşimli bir sohbet deneyimi oluşturmak için modern tarayıcı API'lerini ve kitaplıklarını kullanır. Geliştiriciler şu bileşenleri anlayarak arabirimi özelleştirebilir veya özellikler ekleyebilir:

1. Konuşma Girişi/Çıkışı: Özel web bileşenleri tarayıcının Konuşma API'lerini kullanır:

   • <speech-input-button>: Web Konuşma API'sini SpeechRecognitionkullanarak konuşmayı metne dönüştürür. Bu özellik, ses girişini dinleyen ve metnin dökümüyle bir speech-input-result olayı yayan bir mikrofon düğmesi sağlar.

   • <speech-output-button>: API'yi kullanarak SpeechSynthesis metni yüksek sesle okur. Her yardımcı yanıtının ardından bir konuşmacı simgesiyle gösterilir ve kullanıcılar yanıtı duyar.

   Neden Azure Konuşma Hizmetleri yerine tarayıcı API'lerini kullanmalısınız?

   • Maliyet yok - tamamen tarayıcıda çalışır
   • Anlık yanıt - ağ gecikmesi yok
   • Gizlilik - ses verileri kullanıcının cihazında kalır
   • Ek Azure kaynaklarına gerek yoktur

   Bu bileşenler src/quartapp/static/speech-input.js ve speech-output.js içindedir.

2. Görüntü Önizleme: Onay için analiz göndermeden önce sohbette karşıya yüklenen görüntüyü görüntüler. Bir dosya seçildiğinde önizleme otomatik olarak güncelleştirilir.

   fileInput.addEventListener("change", async function() {
       const file = fileInput.files[0];
       if (file) {
           const fileData = await toBase64(file);
           imagePreview.src = fileData;
           imagePreview.style.display = "block";
       }
   });
   

3. Bootstrap 5 ve Bootstrap Simgeleri: Duyarlı ui bileşenleri ve simgeleri sağlar. Uygulama modern bir görünüm için Bootswatch'un Cosmo temasını kullanır.

4. Şablon Tabanlı İleti İşleme: Yeniden kullanılabilir ileti düzenleri için HTML <template> öğelerini kullanarak tutarlı bir stil ve yapı sağlar.

Keşfedilecek diğer örnek kaynaklar

Sohbet uygulaması örneğine ek olarak, depoda daha fazla öğrenme için keşfedilecek başka kaynaklar da vardır. notebooks dizinindeki aşağıdaki not defterlerine bakın:

Dizüstü Bilgisayar	Açıklama
chat_pdf_images.ipynb	Bu not defteri, PDF sayfalarının resimlere nasıl dönüştürüleceğini ve çıkarım için bir görüntü işleme modeline nasıl gönderileceğini gösterir.
chat_vision.ipynb	Bu not defteri, uygulamada kullanılan görüntü işleme modeliyle el ile deneme için sağlanır.

Yerelleştirilmiş İçerik: Not defterlerinin İspanyolca sürümleri dizindedir notebooks/Spanish/ ve İspanyolca konuşan geliştiriciler için aynı uygulamalı öğrenmeyi sunar. hem İngilizce hem de İspanyolca not defterleri:

• Deneme için doğrudan görüntü işleme modellerini çağırma
• Analiz için PDF sayfalarını resimlere dönüştürme
• Parametreleri ve test istemlerini ayarlama

Kaynakları temizleme

Azure kaynaklarını temizleme

Bu makalede oluşturulan Azure kaynaklar Azure aboneliğinize faturalandırılır. Gelecekte bu kaynaklara ihtiyaç duymayı beklemiyorsanız, daha fazla ücret ödememek için bunları silin.

Azure kaynaklarını silmek ve kaynak kodunu kaldırmak için aşağıdaki Azure Developer CLI komutunu çalıştırın:

azd down --purge

GitHub Codespaces'i temizleme

GitHub Codespaces

GitHub Codespaces ortamını silmek, hesabınız için elde ettiğiniz ücretsiz çekirdek başına saat yetkilendirmesi miktarını en üst düzeye çıkarmanızı sağlar.

Önemli

GitHub hesabınızın hakları hakkında daha fazla bilgi için bakınız GitHub Codespaces aylık dahil depolama ve işlemci saatleri.

1. GitHub Codespaces panosunda oturum açın.

2. Azure-Samples//openai-chat-vision-quickstart GitHub deposundan alınan şu anda çalışan Codespaces'ınızı bulun.

3. Codespace bağlam menüsünü açın ve Sil'i seçin.

Visual Studio Code

Çalışan geliştirme kapsayıcısını durdurun ve yerel çalışma alanı bağlamına geri dönerek Visual Studio Code'u çalıştırın.

Komut Paleti'ni açın, Geliştirici Kapsayıcıları komutlarını arayın ve ardından Geliştirici Kapsayıcıları: Klasörü Yerel Olarak Yeniden Aç öğesini seçin.

İpucu

Visual Studio Code çalışan geliştirme kapsayıcısını durdurur, ancak kapsayıcı docker'da durdurulmuş durumda kalır. Docker'dan kapsayıcı örneğini, görüntüyü ve birimleri silerek yerel makinenizde yer açın.

Yardım alın

Sorununuzu depodaki Issues bölümüne girin.

Sonraki adımlar

> Python