MAX Image Caption Generator Web App

สร้างเว็บแอปเพื่อโต้ตอบกับคำอธิบายภาพที่สร้างขึ้นของเครื่องจักร

ทุกวัน 2.5 quintillion ไบต์ของข้อมูลถูกสร้างขึ้นตามการศึกษาของ IBM ข้อมูลจำนวนมากนั้นเป็นข้อมูลที่ไม่มีโครงสร้างเช่นข้อความขนาดใหญ่การบันทึกเสียงและรูปภาพ ในการทำสิ่งที่เป็นประโยชน์กับข้อมูลเราต้องแปลงเป็นข้อมูลที่มีโครงสร้างก่อน

ในรูปแบบรหัสนี้เราจะใช้หนึ่งในโมเดลจาก Model Asset Exchange (MAX) การแลกเปลี่ยนที่นักพัฒนาสามารถค้นหาและทดลองกับโมเดลการเรียนรู้ลึกโอเพ่นซอร์ส โดยเฉพาะเราจะใช้เครื่องกำเนิดภาพคำบรรยายภาพเพื่อสร้างเว็บแอปพลิเคชันที่จะบรรยายภาพและอนุญาตให้ผู้ใช้กรองผ่านเนื้อหารูปภาพที่ใช้รูปภาพ เว็บแอปพลิเคชันให้อินเทอร์เฟซผู้ใช้แบบโต้ตอบที่ได้รับการสนับสนุนโดยเซิร์ฟเวอร์ Python ที่มีน้ำหนักเบาโดยใช้พายุทอร์นาโด เซิร์ฟเวอร์ถ่ายภาพผ่าน UI และส่งไปยังจุดสิ้นสุดสำหรับรุ่นและแสดงคำอธิบายภาพที่สร้างขึ้นบน UI จุดสิ้นสุดส่วนที่เหลือของรุ่นถูกตั้งค่าโดยใช้อิมเมจนักเทียบท่าที่มีให้ในสูงสุด เว็บ UI แสดงคำอธิบายภาพที่สร้างขึ้นสำหรับแต่ละภาพรวมถึงคลาวด์คำแบบอินเทอร์แอคทีฟเพื่อกรองภาพตามคำบรรยายภาพ

เมื่อผู้อ่านเสร็จสิ้นรูปแบบรหัสนี้พวกเขาจะเข้าใจวิธี:

• สร้างอิมเมจนักเทียบท่าของโมเดลตัวสร้างภาพคำอธิบายภาพสูงสุด
• ปรับใช้รูปแบบการเรียนรู้อย่างลึกซึ้งด้วยจุดสิ้นสุดที่เหลือ
• สร้างคำอธิบายภาพสำหรับภาพโดยใช้ REST API ของรุ่นสูงสุด
• เรียกใช้เว็บแอปพลิเคชันที่ใช้ REST API ของรุ่น

ไหล

1. เซิร์ฟเวอร์ส่งภาพเริ่มต้นไปยังโมเดล API และรับข้อมูลคำบรรยายภาพ
2. ผู้ใช้โต้ตอบกับเว็บ UI ที่มีเนื้อหาเริ่มต้นและอัปโหลดรูปภาพ
3. Web UI ร้องขอข้อมูลคำบรรยายภาพสำหรับภาพจากเซิร์ฟเวอร์และอัปเดตเนื้อหาเมื่อส่งคืนข้อมูล
4. เซิร์ฟเวอร์ส่งภาพไปยังโมเดล API และรับข้อมูลคำบรรยายภาพเพื่อกลับไปที่ Web UI

ส่วนประกอบรวม

• IBM Model Asset Exchange: สถานที่สำหรับนักพัฒนาเพื่อค้นหาและใช้แบบจำลองการเรียนรู้ลึกฟรีและโอเพ่นซอร์ส
• Docker: Docker เป็นเครื่องมือที่ออกแบบมาเพื่อให้ง่ายต่อการสร้างปรับใช้และเรียกใช้แอปพลิเคชันโดยใช้คอนเทนเนอร์

เทคโนโลยีเด่น

• Python: Python เป็นภาษาการเขียนโปรแกรมที่ช่วยให้คุณทำงานได้เร็วขึ้นและรวมระบบของคุณอย่างมีประสิทธิภาพมากขึ้น
• jQuery: jQuery เป็นไลบรารี JavaScript ข้ามแพลตฟอร์มที่ออกแบบมาเพื่อลดความซับซ้อนของการเขียนสคริปต์ฝั่งไคลเอ็นต์ของ HTML
• Bootstrap 3: Bootstrap เป็นห้องสมุดส่วนหน้าฟรีและโอเพ่นซอร์สสำหรับการออกแบบเว็บไซต์และเว็บแอปพลิเคชัน
• Pexels: Pexels ให้ภาพถ่ายสต็อกที่มีคุณภาพสูงและฟรีอย่างสมบูรณ์ภายใต้ใบอนุญาต Creative Commons Zero (CC0)

ดูวิดีโอ

ต่อไปนี้คือการพูดคุยที่ Spark+AI Summit 2018 เกี่ยวกับ Max ที่มีการสาธิตสั้น ๆ ของเว็บแอป

ขั้นตอน

วิธีเรียกใช้รูปแบบรหัส:

• ปรับใช้กับ IBM Cloud
• ปรับใช้กับ Kubernetes
• วิ่งในพื้นที่

ปรับใช้กับ IBM Cloud

ปรับใช้โมเดล

ติดตามการปรับใช้ Doc Model เพื่อปรับใช้โมเดลตัวสร้างภาพคำอธิบายภาพไปยัง IBM Cloud หากคุณมีจุดสิ้นสุดของ API แบบจำลองแล้วคุณสามารถข้ามกระบวนการนี้ได้

หมายเหตุ: การปรับใช้โมเดลอาจใช้เวลานานขึ้นคุณสามารถลองทำงานในพื้นที่ได้

ปรับใช้เว็บแอป

1. กดปุ่ม Deploy to IBM Cloud หากคุณยังไม่มีบัญชีคลาวด์ IBM คุณจะต้องสร้างบัญชี

2. คลิก Delivery Pipeline และคลิกปุ่ม Create + ในแบบฟอร์มเพื่อสร้าง IBM Cloud API Key สำหรับเว็บแอป

   

3. เมื่อคีย์ API ถูกสร้างขึ้น Region Organization และส่วนฟอร์ม Space จะเติม กรอกส่วน Image Caption Generator Model API Endpoint ด้วยจุดสิ้นสุดที่ปรับใช้ด้านบนจากนั้นคลิกที่ Create

   รูปแบบสำหรับรายการนี้ควรเป็น http://170.0.0.1:5000

   

4. ในเครื่องมือให้คลิกที่ Delivery Pipeline เพื่อดูในขณะที่แอปถูกปรับใช้ เมื่อปรับใช้แอปสามารถดูได้โดยคลิกที่ View app

   

ปรับใช้กับ Kubernetes

นอกจากนี้คุณยังสามารถปรับใช้โมเดลและเว็บแอปบน Kubernetes โดยใช้รูปภาพ Docker ล่าสุดบน Quay

บนคลัสเตอร์ Kubernetes ของคุณเรียกใช้คำสั่งต่อไปนี้:

kubectl apply -f https://raw.githubusercontent.com/IBM/MAX-Image-Caption-Generator/master/max-image-caption-generator.yaml
kubectl apply -f https://raw.githubusercontent.com/IBM/MAX-Image-Caption-Generator-Web-App/master/max-image-caption-generator-web-app.yaml

เว็บแอปจะมีให้ที่พอร์ต 8088 ของคลัสเตอร์ของคุณ แบบจำลองจะใช้ได้ภายในเท่านั้น แต่สามารถเข้าถึงได้จากภายนอกผ่าน NodePort

หมายเหตุ: สำหรับการปรับใช้เว็บแอปบนคลาวด์ IBM ขอแนะนำให้ทำตามคำแนะนำของ IBM Cloud ด้านบนแทนที่จะปรับใช้กับบริการ IBM Cloud Kubernetes

วิ่งในพื้นที่

หมายเหตุ: ขั้นตอนเหล่านี้จำเป็นก็ต่อเมื่อเรียกใช้ในเครื่องแทนที่จะใช้ปุ่ม Deploy to IBM Cloud

การตั้งค่ารุ่นสูงสุด

1. ปรับใช้โมเดล
2. การทดลองกับ API (ไม่บังคับ)

เริ่มต้นแอปพลิเคชันเว็บ

1. ตรวจสอบรหัส
2. การติดตั้งการอ้างอิง
3. เรียกใช้เซิร์ฟเวอร์
4. การกำหนดค่าพอร์ต (ไม่บังคับ)
5. คำแนะนำสำหรับนักเทียบท่า (ไม่บังคับ)

การตั้งค่ารุ่นสูงสุด

หมายเหตุ: ชุดคำสั่งในส่วนนี้เป็นเวอร์ชันที่แก้ไขของรุ่นที่พบในหน้าโครงการสร้างภาพคำบรรยายภาพ

1. ปรับใช้โมเดล

ในการเรียกใช้อิมเมจนักเทียบท่าซึ่งจะเริ่มต้นรุ่นที่ให้บริการ API โดยอัตโนมัติให้เรียกใช้:

 docker run -it -p 5000:5000 quay.io/codait/max-image-caption-generator

สิ่งนี้จะดึงภาพที่สร้างไว้ล่วงหน้าจาก Quay (หรือใช้ภาพที่มีอยู่หากแคชไว้ในเครื่องแล้ว) และเรียกใช้ หากคุณต้องการสร้างโมเดลในเครื่องคุณสามารถทำตามขั้นตอนในโมเดล ReadMe

โปรดทราบ ว่าปัจจุบันอิมเมจนักเทียบท่านี้เป็น CPU เท่านั้น (เราจะเพิ่มการสนับสนุนสำหรับภาพ GPU ในภายหลัง)

2. การทดลองกับ API (ไม่บังคับ)

เซิร์ฟเวอร์ API จะสร้างหน้าเอกสาร Swagger แบบโต้ตอบโดยอัตโนมัติ ไปที่ http://localhost:5000 เพื่อโหลด จากนั้นคุณสามารถสำรวจ API และสร้างคำขอทดสอบ

ใช้ model/predict จุดสิ้นสุดเพื่อโหลดไฟล์ทดสอบและรับคำอธิบายภาพสำหรับภาพจาก API

โฟลเดอร์ตัวอย่างรุ่นมีภาพสองสามภาพที่คุณสามารถใช้เพื่อทดสอบ API หรือคุณสามารถใช้ของคุณเอง

นอกจากนี้คุณยังสามารถทดสอบได้ในบรรทัดคำสั่งเช่น:

curl -F " image=@path/to/image.jpg " -X POST http://localhost:5000/model/predict

{
  "status" : " ok " ,
  "predictions" : [
    {
      "index" : " 0 " ,
      "caption" : " a man riding a wave on top of a surfboard . " ,
      "probability" : 0.038827644239537
    },
    {
      "index" : " 1 " ,
      "caption" : " a person riding a surf board on a wave " ,
      "probability" : 0.017933410519265
    },
    {
      "index" : " 2 " ,
      "caption" : " a man riding a wave on a surfboard in the ocean . " ,
      "probability" : 0.0056628732021868
    }
  ]
}

เริ่มต้นแอปพลิเคชันเว็บ

1. ตรวจสอบรหัส

โคลนภาพตัวสร้างภาพเว็บแอปพลิเคชันที่เก็บข้อมูลในเครื่องโดยเรียกใช้คำสั่งต่อไปนี้:

 git clone https://github.com/IBM/MAX-Image-Caption-Generator-Web-App

หมายเหตุ: คุณอาจต้องใช้ cd .. ออกจากไดเรกทอรี Max-Image-Caption-Generator ก่อน

จากนั้นเปลี่ยนไดเรกทอรีเป็นที่เก็บท้องถิ่น

 cd MAX-Image-Caption-Generator-Web-App

2. การติดตั้งการพึ่งพา

ก่อนเรียกใช้เว็บแอพนี้คุณต้องติดตั้งการพึ่งพา:

 pip install -r requirements.txt

3. การรันเซิร์ฟเวอร์

จากนั้นคุณเริ่มเว็บแอปโดยเรียกใช้:

 python app.py

เมื่อเสร็จสิ้นการประมวลผลภาพเริ่มต้น (<1 นาที) แล้วคุณสามารถเข้าถึงเว็บแอปได้ที่: http://localhost:8088

จุดสิ้นสุดของตัวสร้างภาพคำอธิบายภาพจะต้องมีอยู่ที่ http://localhost:5000 สำหรับเว็บแอปเพื่อเริ่มต้นสำเร็จ

4. การกำหนดค่าพอร์ต (ไม่บังคับ)

หากคุณต้องการใช้พอร์ตอื่นหรือกำลังเรียกใช้ ML Endpoint ในตำแหน่งอื่นคุณสามารถเปลี่ยนได้ด้วยตัวเลือกบรรทัดคำสั่ง:

 python app.py --port=[new port] --ml-endpoint=[endpoint url including protocol and port]

5. คำแนะนำสำหรับนักเทียบท่า (ไม่บังคับ)

ในการเรียกใช้เว็บแอพด้วย Docker คอนเทนเนอร์ที่ใช้เว็บเซิร์ฟเวอร์และจุดสิ้นสุดของ REST จะต้องแชร์สแต็กเครือข่ายเดียวกัน สิ่งนี้ทำในขั้นตอนต่อไปนี้:

แก้ไขคำสั่งที่เรียกใช้จุดสิ้นสุดของตัวสร้างภาพคำอธิบายภาพเพื่อแมปพอร์ตเพิ่มเติมในคอนเทนเนอร์ไปยังพอร์ตบนเครื่องโฮสต์ ในตัวอย่างด้านล่างมันถูกแมปกับพอร์ต 8088 บนโฮสต์ แต่สามารถใช้พอร์ตอื่น ๆ ได้

 docker run -it -p 5000:5000 -p 8088:8088 --name max-image-caption-generator quay.io/codait/max-image-caption-generator

สร้างภาพเว็บแอปโดยรัน:

 docker build -t max-image-caption-generator-web-app .

รันคอนเทนเนอร์เว็บแอปโดยใช้:

 docker run --net='container:max-image-caption-generator' -it max-image-caption-generator-web-app

ใช้ภาพ Quay

นอกจากนี้คุณยังสามารถปรับใช้เว็บแอปด้วยภาพ Docker ล่าสุดที่มีอยู่ใน Quay.io โดย Running:

 docker run --net='container:max-image-caption-generator' -it quay.io/codait/max-image-caption-generator-web-app

สิ่งนี้จะใช้โมเดล Docker Container ทำงานด้านบนและสามารถเรียกใช้ได้โดยไม่ต้องโคลนเว็บแอป repo ในเครื่อง

ตัวอย่างเอาต์พุต

การแก้ไขปัญหา

มีผู้ใช้จำนวนมากที่อัปโหลดรูปภาพในเว็บแอปที่ใช้งานมายาวนาน

เมื่อเรียกใช้เว็บแอปที่ http://localhost:8088 หน้าผู้ดูแลระบบสามารถใช้ได้ที่ http://localhost:8088/cleanup ที่อนุญาตให้ผู้ใช้ลบไฟล์ที่ผู้ใช้ที่อัปโหลดทั้งหมดจากเซิร์ฟเวอร์

[หมายเหตุ: สิ่งนี้จะลบรูปภาพที่ผู้ใช้ที่อัปโหลด ทั้งหมด ]

ลิงค์

• Model Asset Exchange (สูงสุด)
• ศูนย์ข้อมูลโอเพนซอร์ซและเทคโนโลยี AI (CODAIT)
• บล็อกประกาศสูงสุด

ห้องสมุดที่ใช้ในรูปแบบรหัสนี้

• D3.JS: D3.JS เป็นไลบรารี JavaScript สำหรับการจัดการเอกสารตามข้อมูล
• D3-Cloud: คำว่าคลาวด์คำที่ได้รับแรงบันดาลใจจาก Wordle เขียนใน JavaScript
• Featherlight: Featherlight เป็นปลั๊กอิน JQuery Lightbox ที่มีน้ำหนักเบามาก
• Glyphicons: Glyphicons เป็นห้องสมุดของไอคอนและสัญลักษณ์โมโนโครมที่เตรียมไว้อย่างแม่นยำสร้างขึ้นโดยเน้นไปที่ความเรียบง่ายและการวางแนวที่ง่าย
• ตัวเลือกรูปภาพ: ตัวเลือกรูปภาพเป็นปลั๊กอิน jQuery อย่างง่ายที่แปลงองค์ประกอบเลือกเป็นอินเทอร์เฟซกราฟิกที่ใช้งานง่ายกว่า
• ขอความยินยอมจากคุกกี้: ความยินยอมของคุกกี้เป็นปลั๊กอิน JavaScript สำหรับการแจ้งเตือนผู้ใช้เกี่ยวกับการใช้คุกกี้บนเว็บไซต์

เรียนรู้เพิ่มเติม

• รูปแบบรหัสปัญญาประดิษฐ์ : สนุกกับรูปแบบรหัสนี้? ตรวจสอบรูปแบบรหัสปัญญาประดิษฐ์อื่น ๆ ของเรา
• เพลย์ลิสต์รูปแบบ AI และรหัสข้อมูล : บุ๊กมาร์กเพลย์ลิสต์ของเราด้วยวิดีโอรูปแบบรหัสทั้งหมดของเรา
• Watson Studio : Master the Art of Data Science กับ Watson Studio ของ IBM
• การเรียนรู้อย่างลึกซึ้งกับ Watson Studio : การออกแบบและปรับใช้แบบจำลองการเรียนรู้อย่างลึกซึ้งโดยใช้เครือข่ายประสาท, ขยายได้อย่างง่ายดายเป็นหลายร้อยของการฝึกอบรม เรียนรู้เพิ่มเติมที่การเรียนรู้อย่างลึกซึ้งกับ Watson Studio

ใบอนุญาต

รูปแบบรหัสนี้ได้รับอนุญาตภายใต้ใบอนุญาตซอฟต์แวร์ Apache เวอร์ชัน 2 วัตถุรหัสบุคคลที่สามแยกต่างหากที่เรียกใช้ภายในรูปแบบรหัสนี้ได้รับอนุญาตจากผู้ให้บริการที่เกี่ยวข้องตามใบอนุญาตแยกต่างหาก การมีส่วนร่วมขึ้นอยู่กับใบรับรองผู้พัฒนาแหล่งกำเนิดรุ่น 1.1 (DCO) และใบอนุญาตซอฟต์แวร์ Apache เวอร์ชัน 2

Apache Software License (ASL) FAQ