

โครงการนี้เป็นผลมาจากการรวมกันและการพัฒนาอย่างต่อเนื่องของสองโครงการก่อนหน้านี้ของฉัน:
ในปี 2023 ท่ามกลางการพูดคุยของ CHATGPT ฉันได้รับแรงบันดาลใจในการรวมสองโครงการก่อนหน้านี้ของฉันเข้ากับผู้เล่นพอดคาสต์หนึ่งคนและปรับปรุงโดยใช้ API ของ AI ที่เปิดอยู่
FYI: Spotify ในภายหลังเปิดตัวโซลูชันที่คล้ายกันสำหรับทั้งคำบรรยายและบทของพอดคาสต์อ่านเพิ่มเติมที่นี่
เทคโนโลยีที่ใช้ในโครงการนี้สามารถพบได้ในตารางด้านล่าง
| เทคโนโลยี | ใช้เคส |
|---|---|
| ตอบโต้ | กรอบส่วนหน้า |
| ลมลม | ห้องสมุดสไตล์ CSS |
| งูหลาม | แบ็กเอนด์เพื่อจัดการตรรกะการถอดความ |
| ขวด | เชื่อมต่อแบ็กเอนด์ Python กับ React Frontend |
| Spotify API | เพื่อรับข้อมูลเกี่ยวกับตอนพอดคาสต์ |
| API การรู้จำคำพูดของ Google | แปลงคำพูดเป็นข้อความเช่นถอดความพอดคาสต์ |
| เปิด GPT 3.5 API ของ AI | ส่วนถอดเสียงเป็นบทที่ขึ้นอยู่กับการถอดเสียง |
ฉันต้องการเรียนรู้วิธีการเชื่อมต่อส่วนหน้า REACT กับแบ็กเอนด์ Python ดังนั้นฉันจึงใช้โครงการนี้เป็นโอกาสในการเรียนรู้ที่จะทำเช่นนั้น เป็นผลให้ฉันได้ทำการวิศวกรรมโดยการสร้าง API ของตัวเองเพื่อจัดการการถอดรหัสบนแบ็กเอนด์ Python แทนที่จะเรียก API แบบปลั๊กและเล่นในส่วนหน้า
โดยเฉพาะอย่างยิ่งส่วนหน้าทำการโทรไปยัง Spotify API และได้รับ URL ของพอดคาสต์ที่ร้องขอ URL ถูกส่งเป็นคำขอไปยังแบ็กเอนด์ที่ดาวน์โหลดพอดคาสต์เป็น MP3 เพื่อประมวลผล
เหตุผลที่ต้องประมวลผล MP3 คือฉันต้องได้รับการประทับเวลาสำหรับแต่ละประโยคเพื่อแสดงในเวลาที่ถูกต้องในคำบรรยาย ฉันระบุประโยคในการถอดเสียงโดยฟังความเงียบ (<14 เดซิเบล) นานกว่า 500 มิลลิวินาที เมื่อมีการระบุความเงียบฉันจะแยกไฟล์เสียงต้นฉบับเพื่อสร้างชุดไฟล์เสียงขนาดเล็กหนึ่งไฟล์สำหรับแต่ละประโยค ด้วยการทำเช่นนี้ฉันสามารถคำนวณเวลาเริ่มต้นและสิ้นสุดของแต่ละประโยคโดยดูที่ความยาวของไฟล์เสียงขนาดเล็กแต่ละไฟล์ดูรูปด้านล่าง

ตอนนี้ไฟล์เสียงทั้งหมดถูกส่งไปยัง API การรู้จำคำพูดของ Google และส่งคืนสตริงของเสียงที่ถอดความ ขณะนี้การถอดความกำลังถูกส่งกลับไปยังส่วนหน้าซึ่งขอให้เปิด API ของ AI เพื่อแบ่งส่วนการถอดเสียงและระบุหัวข้อที่เป็นไปได้เพื่อแบ่งตอนออกเป็นบทที่แตกต่างกัน
API ของ Spotify ไม่อนุญาตให้คุณดาวน์โหลด Podcast Full Podcast เพียง 30 วินาทีตัวอย่าง สิ่งนี้ทำให้แอป จำกัด การใช้งานมากและดังนั้นจึงเป็นเพียงการพิสูจน์แนวคิด
สร้างไฟล์. env ในไดเรกทอรีรูทและเพิ่มปุ่ม API ของคุณ:
REACT_APP_SPOTFY_CLIENT_ID=YOUR_SPOTIFY_CLIENT_ID_GOES_HERE
REACT_APP_OPEN_AI_KEY=YOUR_OPEN_AI_KEY_GOES_HERE
ใช้คำสั่งต่อไปนี้เพื่อเรียกใช้โครงการ เริ่มต้นส่วนหน้าในเทอร์มินัลหนึ่งและแบ็กเอนด์ในเทอร์มินัลอื่น
export FLASK_APP=backend
export FLASK_DEBUG=1
flask run
cd frontend
npm start
ดูการสาธิต 1 นาทีของโครงการที่นี่

โฮมเพจพร้อมการตรวจสอบ Spotify

หน้าการค้นพบ

กำลังโหลดหน้าจอ

หน้าจอตอน

หน้าจอตอน

คำบรรยายในเต็มหน้าจอ

ภาพรวมของบทภายในตอน

เครื่องเล่นเสียงหารด้วยบท

ทรานสคริปต์ค้นหา