374 lines
15 KiB
HTML
374 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<!-- saved from url=(0098)file:///Users/home/Downloads/deepseek_html_joke_bot_speaking_cards_final.html_20260202_d830c8.html -->
|
|
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Speaking Cards - Joke Bot Project</title>
|
|
<style>
|
|
@page {
|
|
size: A4;
|
|
margin: 1cm;
|
|
}
|
|
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
background: white;
|
|
}
|
|
|
|
.page {
|
|
width: 21cm;
|
|
min-height: 29.7cm;
|
|
margin: 0 auto;
|
|
padding: 0.5cm;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.cards-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-template-rows: repeat(4, 1fr);
|
|
gap: 0.8cm;
|
|
height: 28cm;
|
|
padding: 0.5cm;
|
|
}
|
|
|
|
.card {
|
|
background: white;
|
|
border: 2px solid #3498db;
|
|
border-radius: 8px;
|
|
padding: 0.6cm;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.card-number {
|
|
background: #3498db;
|
|
color: white;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
margin-bottom: 0.3cm;
|
|
}
|
|
|
|
.card-content {
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.card-content strong {
|
|
display: block;
|
|
margin-bottom: 0.2cm;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
.card-content ul {
|
|
margin: 0.2cm 0;
|
|
padding-left: 0.8cm;
|
|
}
|
|
|
|
.card-content li {
|
|
margin: 0.1cm 0;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.card-time {
|
|
text-align: right;
|
|
font-size: 11px;
|
|
color: #666;
|
|
margin-top: 0.3cm;
|
|
padding-top: 0.2cm;
|
|
border-top: 1px dotted #ddd;
|
|
}
|
|
|
|
@media print {
|
|
body {
|
|
background: white;
|
|
}
|
|
|
|
.cards-grid {
|
|
height: auto;
|
|
min-height: 27cm;
|
|
}
|
|
|
|
.card {
|
|
break-inside: avoid;
|
|
page-break-inside: avoid;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Page 1: Cards 1-8 -->
|
|
<div class="page">
|
|
<div class="cards-grid">
|
|
<!-- Card 1 -->
|
|
<div class="card">
|
|
<div class="card-number">1</div>
|
|
<div class="card-content">
|
|
<strong>Slide 1: Title Slide</strong>
|
|
"Good morning! We are students from Technolyceum, and today we'll present our Joke Bot Development project."
|
|
<br><br>
|
|
"I'm [Your Name], and with me are my teammates: [List names]. We chose as a team to do a joke bot. Our supervisor is Bob Santos."
|
|
<br><br>
|
|
"Our journey took us from hardcoded jokes to a community-driven platform with AI integration."
|
|
</div>
|
|
<div class="card-time">45 sec</div>
|
|
</div>
|
|
|
|
<!-- Card 2 -->
|
|
<div class="card">
|
|
<div class="card-number">2</div>
|
|
<div class="card-content">
|
|
<strong>Slide 2: Development Journey</strong>
|
|
"Our project followed a development with three distinct stages."
|
|
<br><br>
|
|
"Stage 1 started with hardcoded jokes using Telegram API for testing."
|
|
<br><br>
|
|
"Stage 2 explored Yandex AI API for dynamic joke generation."
|
|
<br><br>
|
|
"Stage 3 added database functionality with user-generated content and interactive voting."
|
|
</div>
|
|
<div class="card-time">50 sec</div>
|
|
</div>
|
|
|
|
<!-- Card 3 -->
|
|
<div class="card">
|
|
<div class="card-number">3</div>
|
|
<div class="card-content">
|
|
<strong>Slide 3: Phase 1 - Hardcoded Jokes</strong>
|
|
"Let's look at Phase 1. This was our simplest implementation using the Telegram Bot API."
|
|
<br><br>
|
|
"We created a basic bot with two commands: /start for greeting users, and /joke to deliver a random joke from a pre-approved list."
|
|
<br><br>
|
|
"The jokes were hardcoded into the Python script and had limited user interaction."
|
|
<br><br>
|
|
"This stage helped introduce us to Python coding, basic bot functionality and API integration."
|
|
</div>
|
|
<div class="card-time">55 sec</div>
|
|
</div>
|
|
|
|
<!-- Card 4 -->
|
|
<div class="card">
|
|
<div class="card-number">4</div>
|
|
<div class="card-content">
|
|
<strong>Slide 4: Phase 2 - AI Integration</strong>
|
|
"For Phase 2, we briefly explored Yandex's AI API to generate jokes dynamically."
|
|
<br><br>
|
|
"Instead of static jokes, the bot used Yandex GPT to create original, context-aware humor."
|
|
<br><br>
|
|
"However the jokes were not so humorous. But it gave us some exposure to AI API services."
|
|
</div>
|
|
<div class="card-time">50 sec</div>
|
|
</div>
|
|
|
|
<!-- Card 5 -->
|
|
<div class="card">
|
|
<div class="card-number">5</div>
|
|
<div class="card-content">
|
|
<strong>Slide 5: Phase 3 - User-Generated Content</strong>
|
|
"Phase 3 introduced us to databases, user sentiment capture and transformed our project into a community driven platform."
|
|
<br><br>
|
|
"We added an SQLite database to store jokes, user information, and a feature to allow users to rate jokes."
|
|
<br><br>
|
|
"Users could now submit their own jokes which required administrative approval before publication."
|
|
<br><br>
|
|
"We implemented a voting system where users rate jokes with thumbs up, down, or neutral."
|
|
<br><br>
|
|
"This user sentiment analysis is a feature often used in AI systems."
|
|
</div>
|
|
<div class="card-time">55 sec</div>
|
|
</div>
|
|
|
|
<!-- Card 6 -->
|
|
<div class="card">
|
|
<div class="card-number">6</div>
|
|
<div class="card-content">
|
|
<strong>Slide 6: System Demonstration</strong>
|
|
"Let me demonstrate our final system's functionality."
|
|
<br><br>
|
|
"The command-line interface allows users to: get random jokes, add new jokes, and quit the program."
|
|
<br><br>
|
|
"Users can rate jokes immediately after viewing them, which can later be used for user sentiment analysis."
|
|
<br><br>
|
|
"This demonstrates a system with database, voting, and content management."
|
|
</div>
|
|
<div class="card-time">60 sec</div>
|
|
</div>
|
|
|
|
<!-- Card 7 -->
|
|
<div class="card">
|
|
<div class="card-number">7</div>
|
|
<div class="card-content">
|
|
<strong>Slide 7: Technology Stack</strong>
|
|
"Our project utilized several key technologies."
|
|
<br><br>
|
|
"Python 3.9+ formed our programming foundation."
|
|
<br><br>
|
|
"The Telegram Bot API handled all user interactions."
|
|
<br><br>
|
|
"SQLite managed our database needs for Phase 3."
|
|
<br><br>
|
|
"Yandex AI API provided AI capabilities in Phase 2."
|
|
</div>
|
|
<div class="card-time">55 sec</div>
|
|
</div>
|
|
|
|
<!-- Card 8 -->
|
|
<div class="card">
|
|
<div class="card-number">8</div>
|
|
<div class="card-content">
|
|
<strong>Slide 8: Learning Outcomes</strong>
|
|
"Through this project, we gained valuable technical skills."
|
|
<br><br>
|
|
"We learned API integration with both Telegram."
|
|
<br><br>
|
|
"Database design and management with SQLite."
|
|
<br><br>
|
|
"We practiced iterative development, starting simple and adding complexity."
|
|
<br><br>
|
|
"The three-phase approach taught us progressive system enhancement."
|
|
</div>
|
|
<div class="card-time">45 sec</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Page 2: Cards 9-END + Helper Cards -->
|
|
<div class="page">
|
|
<div class="cards-grid">
|
|
<!-- Card 9 -->
|
|
<div class="card">
|
|
<div class="card-number">9</div>
|
|
<div class="card-content">
|
|
<strong>Slide 9: Future Applications</strong>
|
|
"Besides being able to integrate our joke bot with the schools existing Technolyceum_bot, our system's architecture has potential beyond joke sharing."
|
|
<br><br>
|
|
"It could adapt for capturing feedback from students, parents and school staff and to do sentiment analysis."
|
|
<br><br>
|
|
"The database structure could be scaled to work with surveys and polling systems."
|
|
<br><br>
|
|
"The design allows adaptation for various institutional needs."
|
|
</div>
|
|
<div class="card-time">50 sec</div>
|
|
</div>
|
|
|
|
<!-- Card 10 -->
|
|
<div class="card">
|
|
<div class="card-number">10</div>
|
|
<div class="card-content">
|
|
<strong>Slide 10: Conclusion</strong>
|
|
"In conclusion, our Telegram Joke Bot demonstrates practical application of programming concepts."
|
|
<br><br>
|
|
"We implemented a three-phase development from simple to complex."
|
|
<br><br>
|
|
"We practiced iterative improvement and feature addition."
|
|
<br><br>
|
|
"The project provided hands-on learning in API usage and database management."
|
|
<br><br>
|
|
"Thank you for your attention. We're happy to answer any questions about our development process."
|
|
</div>
|
|
<div class="card-time">50 sec</div>
|
|
</div>
|
|
|
|
<!-- Demo Card -->
|
|
<div class="card" style="border: 2px solid #2ecc71;">
|
|
<div class="card-number" style="background: #2ecc71;">🤖</div>
|
|
<div class="card-content">
|
|
<strong>DEMO SCRIPT - Slide 6</strong>
|
|
"Now, let me show you our system in action."
|
|
<br><br>
|
|
"Here's our command-line interface. I'll select option 1 to get a random joke."
|
|
<br><br>
|
|
[Show joke display]
|
|
<br><br>
|
|
"You can see the joke, the contributor, and the community rating."
|
|
<br><br>
|
|
"Now I'll rate this joke with 'u' for thumbs up."
|
|
<br><br>
|
|
"The system confirms my rating has been recorded in the database."
|
|
</div>
|
|
<div class="card-time">DEMO</div>
|
|
</div>
|
|
|
|
<!-- Technical Terms Card -->
|
|
<div class="card" style="border: 2px dashed #ddd; background: #f8f9fa;">
|
|
<div class="card-number" style="background: #ddd; color: #666;">!</div>
|
|
<div class="card-content" style="color: #999; text-align: center;">
|
|
<strong>Technical Terms:</strong>
|
|
<br><br>
|
|
• API = Application Programming Interface
|
|
<br>
|
|
• SQLite = Lightweight database
|
|
<br>
|
|
• GPT = Generative Pre-trained Transformer
|
|
<br>
|
|
• CLI = Command Line Interface
|
|
</div>
|
|
<div class="card-time">-</div>
|
|
</div>
|
|
|
|
<!-- Q&A Card -->
|
|
<div class="card" style="border: 2px dashed #ddd; background: #f8f9fa;">
|
|
<div class="card-number" style="background: #ddd; color: #666;">Q</div>
|
|
<div class="card-content" style="color: #999; text-align: center;">
|
|
<strong>Possible Questions:</strong>
|
|
<br><br>
|
|
• Why did you choose a joke bot?
|
|
<br>
|
|
• What was the hardest part?
|
|
<br>
|
|
• How do you moderate jokes?
|
|
<br>
|
|
• Can this work with school systems?
|
|
</div>
|
|
<div class="card-time">-</div>
|
|
</div>
|
|
|
|
<!-- Timing Card -->
|
|
<div class="card" style="border: 2px dashed #ddd; background: #f8f9fa;">
|
|
<div class="card-number" style="background: #ddd; color: #666;">⏱️</div>
|
|
<div class="card-content" style="color: #999; text-align: center;">
|
|
<strong>Timing:</strong>
|
|
<br><br>
|
|
• Total: 8 minutes
|
|
<br>
|
|
• Demo: 1 minute
|
|
<br>
|
|
• Q&A: 2 minutes
|
|
<br>
|
|
• Keep to time!
|
|
</div>
|
|
<div class="card-time">-</div>
|
|
</div>
|
|
|
|
<!-- Presenter Tips Card -->
|
|
<div class="card" style="border: 2px dashed #ddd; background: #f8f9fa;">
|
|
<div class="card-number" style="background: #ddd; color: #666;">🎤</div>
|
|
<div class="card-content" style="color: #999; text-align: center;">
|
|
<strong>Presenter Tips:</strong>
|
|
<br><br>
|
|
• Speak clearly and slowly
|
|
<br>
|
|
• Look at the audience
|
|
<br>
|
|
• Point to relevant code/screens
|
|
<br>
|
|
• Smile and be confident!
|
|
</div>
|
|
<div class="card-time">-</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</body></html> |