generated from technolyceum/ai6-m2
1017 lines
32 KiB
HTML
1017 lines
32 KiB
HTML
<!DOCTYPE html>
|
|
<!-- saved from url=(0069)file:///Users/home/Downloads/deepseek_html_20251212_6a3862%20(1).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>AI-Powered Joke Bot | Student Thesis</title>
|
|
<style>
|
|
/* === MINIMALIST PROFESSIONAL STYLES === */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
color: #1a1a1a;
|
|
line-height: 1.4;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
background:
|
|
linear-gradient(rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.98)),
|
|
url('presentation-bg.jpg') center/cover no-repeat fixed;
|
|
}
|
|
|
|
.presentation-container {
|
|
max-width: 900px;
|
|
height: 100vh;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.slide {
|
|
display: none;
|
|
flex: 1;
|
|
padding: 40px 30px;
|
|
background: transparent;
|
|
overflow-y: auto;
|
|
max-height: calc(100vh - 100px);
|
|
}
|
|
|
|
.active {
|
|
display: block;
|
|
animation: fadeIn 0.5s ease;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* === TITLE SLIDE STYLES === */
|
|
.title-slide {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.thesis-title {
|
|
font-weight: 800;
|
|
font-size: 2.8rem;
|
|
color: #9b59b6;
|
|
margin-bottom: 10px;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.thesis-subtitle {
|
|
font-size: 1.3rem;
|
|
color: #e74c3c;
|
|
margin-bottom: 40px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.author-info {
|
|
margin-top: 50px;
|
|
padding-top: 30px;
|
|
border-top: 2px solid #e0e6ed;
|
|
width: 100%;
|
|
max-width: 600px;
|
|
}
|
|
|
|
.institution {
|
|
font-size: 1.1rem;
|
|
color: #4a5568;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.supervisor-info {
|
|
font-size: 1rem;
|
|
color: #2c3e50;
|
|
margin: 15px 0;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.date {
|
|
font-size: 0.95rem;
|
|
color: #718096;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
/* === OPTIMIZED TYPOGRAPHY === */
|
|
h1 {
|
|
font-weight: 700;
|
|
font-size: 2.2rem;
|
|
color: #8e44ad;
|
|
margin-bottom: 25px;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
h2 {
|
|
font-weight: 600;
|
|
font-size: 1.8rem;
|
|
color: #8e44ad;
|
|
margin-bottom: 25px;
|
|
padding-bottom: 15px;
|
|
border-bottom: 2px solid #e0e6ed;
|
|
}
|
|
|
|
h3 {
|
|
font-weight: 600;
|
|
font-size: 1.2rem;
|
|
color: #e74c3c;
|
|
margin-bottom: 15px;
|
|
margin-top: 25px;
|
|
}
|
|
|
|
p {
|
|
font-size: 1rem;
|
|
color: #4a5568;
|
|
margin-bottom: 15px;
|
|
max-width: 800px;
|
|
}
|
|
|
|
.lead {
|
|
font-size: 1.1rem;
|
|
color: #2c3e50;
|
|
font-weight: 500;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* === COMPACT LAYOUT COMPONENTS === */
|
|
.slide-header {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.project-info {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
margin-bottom: 25px;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
|
|
border-left: 4px solid #9b59b6;
|
|
}
|
|
|
|
.feature-list {
|
|
background: #f8fafc;
|
|
padding: 25px;
|
|
border-radius: 10px;
|
|
margin: 25px 0;
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.feature-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin-bottom: 15px;
|
|
padding-bottom: 15px;
|
|
border-bottom: 1px solid #edf2f7;
|
|
}
|
|
|
|
.feature-item:last-child {
|
|
border-bottom: none;
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.feature-bullet {
|
|
background: #9b59b6;
|
|
color: white;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 15px;
|
|
flex-shrink: 0;
|
|
font-weight: bold;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.feature-text {
|
|
flex: 1;
|
|
color: #4a5568;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.demo-section {
|
|
background: #f8fafc;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
margin: 20px 0;
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.demo-message {
|
|
background: white;
|
|
padding: 15px;
|
|
margin: 10px 0;
|
|
border-radius: 6px;
|
|
border-left: 3px solid #9b59b6;
|
|
font-family: 'SF Mono', 'Monaco', monospace;
|
|
font-size: 0.9rem;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.joke-example {
|
|
background: #fff8e1;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
margin: 20px 0;
|
|
border: 1px solid #ffe082;
|
|
}
|
|
|
|
.joke-text {
|
|
font-style: italic;
|
|
font-size: 1rem;
|
|
color: #5d4037;
|
|
text-align: center;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.punchline {
|
|
font-weight: bold;
|
|
color: #e74c3c;
|
|
text-align: center;
|
|
margin-top: 15px;
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.benefit-item {
|
|
background: white;
|
|
padding: 18px;
|
|
border-radius: 8px;
|
|
margin: 15px 0;
|
|
border-left: 3px solid #2ecc71;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
/* === TECHNOLOGY SECTION STYLES === */
|
|
.tech-section {
|
|
background: #f9f0ff;
|
|
padding: 25px;
|
|
border-radius: 10px;
|
|
margin: 25px 0;
|
|
border-left: 4px solid #8e44ad;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.tech-item {
|
|
background: white;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
margin: 12px 0;
|
|
border-left: 3px solid #9b59b6;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.tech-icon {
|
|
background: #f3e5f5;
|
|
color: #8e44ad;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 15px;
|
|
flex-shrink: 0;
|
|
font-weight: bold;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.tech-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.tech-name {
|
|
font-weight: 600;
|
|
color: #2c3e50;
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.tech-desc {
|
|
color: #555;
|
|
font-size: 0.95rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* === JOKE CATEGORIES === */
|
|
.category-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: 15px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.category-card {
|
|
background: white;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
border: 2px solid #e0e6ed;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.category-card:hover {
|
|
transform: translateY(-2px);
|
|
border-color: #9b59b6;
|
|
box-shadow: 0 4px 12px rgba(155, 89, 182, 0.1);
|
|
}
|
|
|
|
.category-emoji {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.category-name {
|
|
font-weight: 600;
|
|
color: #2c3e50;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
/* === COMPACT NAVIGATION === */
|
|
.navigation {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 15px 20px;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
border-top: 1px solid #e2e8f0;
|
|
backdrop-filter: blur(10px);
|
|
height: 70px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.nav-btn {
|
|
padding: 10px 25px;
|
|
background: #9b59b6;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 0.95rem;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.nav-btn:hover:not(:disabled) {
|
|
background: #8e44ad;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.nav-btn:disabled {
|
|
background: #cbd5e0;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
|
|
.slide-counter {
|
|
font-weight: 600;
|
|
color: #4a5568;
|
|
font-size: 0.95rem;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 150px;
|
|
height: 3px;
|
|
background: #e2e8f0;
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
margin: 0 12px;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: #9b59b6;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
/* === COMPACT VISUAL ELEMENTS === */
|
|
.simple-list {
|
|
list-style: none;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.simple-list li {
|
|
padding: 8px 0;
|
|
padding-left: 25px;
|
|
position: relative;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.simple-list li:before {
|
|
content: "✓";
|
|
position: absolute;
|
|
left: 0;
|
|
color: #2ecc71;
|
|
font-weight: bold;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.highlight {
|
|
background: #f3e5f5;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
color: #8e44ad;
|
|
font-weight: 500;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* === SCROLLBAR STYLING === */
|
|
.slide::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.slide::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.slide::-webkit-scrollbar-thumb {
|
|
background: #c1c1c1;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.slide::-webkit-scrollbar-thumb:hover {
|
|
background: #a8a8a8;
|
|
}
|
|
|
|
/* === RESPONSIVE DESIGN === */
|
|
@media (max-width: 768px) {
|
|
body {
|
|
height: 100vh;
|
|
}
|
|
|
|
.presentation-container {
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.slide {
|
|
padding: 30px 20px;
|
|
max-height: calc(100vh - 70px);
|
|
}
|
|
|
|
.thesis-title {
|
|
font-size: 2.2rem;
|
|
}
|
|
|
|
.thesis-subtitle {
|
|
font-size: 1.1rem;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.8rem;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.1rem;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
p, .lead {
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.feature-list {
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.tech-section {
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.tech-item {
|
|
padding: 12px;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.tech-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
margin-right: 12px;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.category-grid {
|
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.navigation {
|
|
padding: 12px 15px;
|
|
height: 60px;
|
|
}
|
|
|
|
.nav-btn {
|
|
padding: 8px 20px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 100px;
|
|
}
|
|
|
|
.demo-message {
|
|
font-size: 0.85rem;
|
|
padding: 12px;
|
|
}
|
|
}
|
|
|
|
@media (max-height: 700px) {
|
|
.slide {
|
|
padding: 25px 20px;
|
|
}
|
|
|
|
.thesis-title {
|
|
font-size: 2.2rem;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.8rem;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.1rem;
|
|
margin-top: 15px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 10px;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.feature-list {
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.tech-section {
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.tech-item {
|
|
padding: 12px;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.demo-section {
|
|
padding: 15px;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.demo-message {
|
|
padding: 10px;
|
|
margin: 8px 0;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.category-grid {
|
|
gap: 10px;
|
|
margin: 15px 0;
|
|
}
|
|
}
|
|
</style>
|
|
<link href="./AI-Powered Joke Bot _ Student Thesis_files/css2" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="presentation-container">
|
|
<!-- Slide 1: Title Slide -->
|
|
<div class="slide" id="slide1">
|
|
<div class="title-slide">
|
|
<div>
|
|
<h1 class="thesis-title">AI-Powered Joke Bot</h1>
|
|
<p class="thesis-subtitle">Bringing Humor to Digital Conversations</p>
|
|
</div>
|
|
|
|
<div class="author-info">
|
|
<div class="institution">
|
|
Student Thesis Project
|
|
</div>
|
|
|
|
<div class="supervisor-info">
|
|
Supervisor: <strong>Dr. Johnson</strong>
|
|
</div>
|
|
|
|
<div class="supervisor-info">
|
|
Student Developer: <strong>[Your Name]</strong>
|
|
</div>
|
|
|
|
<div class="date">
|
|
Academic Year 2025-2026
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 2: Project Overview -->
|
|
<div class="slide" id="slide2">
|
|
<div class="slide-header">
|
|
<h1>Project Overview</h1>
|
|
<p class="lead">An intelligent bot that understands and generates humor</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3>Project Description</h3>
|
|
<p>An AI-powered bot that generates, categorizes, and delivers jokes based on user preferences, mood, and context. Designed to bring lightheartedness to digital interactions and demonstrate natural language understanding capabilities.</p>
|
|
|
|
<div class="project-info">
|
|
<p><strong>Thesis Focus:</strong> Exploring how AI can understand and generate humor while maintaining appropriateness and cultural sensitivity.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Key Features</h3>
|
|
|
|
<div class="feature-list">
|
|
<div class="feature-item">
|
|
<div class="feature-bullet">1</div>
|
|
<div class="feature-text">
|
|
<strong>Context-Aware Humor</strong> - Generates jokes based on user preferences, time of day, and conversation context
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feature-item">
|
|
<div class="feature-bullet">2</div>
|
|
<div class="feature-text">
|
|
<strong>Multiple Categories</strong> - Supports various joke types including puns, one-liners, knock-knock jokes, and dad jokes
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feature-item">
|
|
<div class="feature-bullet">3</div>
|
|
<div class="feature-text">
|
|
<strong>Learning System</strong> - Adapts to user preferences by tracking which jokes get the best reactions
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 3: How It Works -->
|
|
<div class="slide" id="slide3">
|
|
<h2>How Users Interact</h2>
|
|
<p class="lead">Simple commands for instant humor</p>
|
|
|
|
<h3>Basic Commands</h3>
|
|
<p>Users can request jokes using intuitive commands and natural language.</p>
|
|
|
|
<div class="demo-section">
|
|
<p><strong>Example 1: Random joke</strong></p>
|
|
<div class="demo-message">
|
|
User: <strong>/joke</strong><br>
|
|
Bot: "Why don't scientists trust atoms? Because they make up everything!"
|
|
</div>
|
|
|
|
<p><strong>Example 2: Category-specific</strong></p>
|
|
<div class="demo-message">
|
|
User: <strong>/pun</strong><br>
|
|
Bot: "I told my computer I needed a break... now it won't stop sending me Kit-Kat ads."
|
|
</div>
|
|
|
|
<p><strong>Example 3: Mood-based</strong></p>
|
|
<div class="demo-message">
|
|
User: <strong>I need a pick-me-up</strong><br>
|
|
Bot: "Here's something light: What do you call fake spaghetti? An impasta!"
|
|
</div>
|
|
</div>
|
|
|
|
<div class="joke-example">
|
|
<h3>Joke Generation Example</h3>
|
|
<div class="joke-text">
|
|
"Why did the AI cross the road?"
|
|
</div>
|
|
<div class="punchline">
|
|
"To optimize the chicken's pathfinding algorithm!"
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 4: Joke Categories -->
|
|
<div class="slide" id="slide4">
|
|
<h2>Joke Categories & Types</h2>
|
|
<p class="lead">Diverse humor for different tastes</p>
|
|
|
|
<h3>Supported Categories</h3>
|
|
|
|
<div class="category-grid">
|
|
<div class="category-card">
|
|
<div class="category-emoji">😄</div>
|
|
<div class="category-name">One-Liners</div>
|
|
</div>
|
|
|
|
<div class="category-card">
|
|
<div class="category-emoji">👨👧</div>
|
|
<div class="category-name">Dad Jokes</div>
|
|
</div>
|
|
|
|
<div class="category-card">
|
|
<div class="category-emoji">🔔</div>
|
|
<div class="category-name">Knock-Knock</div>
|
|
</div>
|
|
|
|
<div class="category-card">
|
|
<div class="category-emoji">📚</div>
|
|
<div class="category-name">Puns</div>
|
|
</div>
|
|
|
|
<div class="category-card">
|
|
<div class="category-emoji">🤖</div>
|
|
<div class="category-name">Tech Humor</div>
|
|
</div>
|
|
|
|
<div class="category-card">
|
|
<div class="category-emoji">🎓</div>
|
|
<div class="category-name">Academic</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Context Awareness</h3>
|
|
<p>The bot considers:</p>
|
|
<ul class="simple-list">
|
|
<li>Time of day (morning vs. evening jokes)</li>
|
|
<li>User's previous reactions</li>
|
|
<li>Cultural appropriateness</li>
|
|
<li>Current events (when relevant)</li>
|
|
<li>User's stated mood or preference</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Slide 5: Technology Stack -->
|
|
<div class="slide" id="slide5">
|
|
<h2>Technology Stack</h2>
|
|
<p class="lead">Modern AI and development tools</p>
|
|
|
|
<div class="tech-section">
|
|
<h3>Core Technologies</h3>
|
|
|
|
<div class="tech-item">
|
|
<div class="tech-icon">🤖</div>
|
|
<div class="tech-content">
|
|
<span class="tech-name">Natural Language Processing</span>
|
|
<span class="tech-desc">GPT-based models for understanding context and generating appropriate humor</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tech-item">
|
|
<div class="tech-icon">💬</div>
|
|
<div class="tech-content">
|
|
<span class="tech-name">Telegram Bot API</span>
|
|
<span class="tech-desc">Platform for deployment and user interaction</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tech-item">
|
|
<div class="tech-icon">🗄️</div>
|
|
<div class="tech-content">
|
|
<span class="tech-name">Database</span>
|
|
<span class="tech-desc">Storing joke collections, user preferences, and interaction history</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tech-item">
|
|
<div class="tech-icon">⚙️</div>
|
|
<div class="tech-content">
|
|
<span class="tech-name">Python Backend</span>
|
|
<span class="tech-desc">FastAPI or Django for bot logic and API management</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>AI Components</h3>
|
|
<ul class="simple-list">
|
|
<li>Sentiment analysis for mood detection</li>
|
|
<li>Context understanding from conversation history</li>
|
|
<li>Joke appropriateness filtering</li>
|
|
<li>Personalized recommendation algorithms</li>
|
|
<li>Feedback learning system</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Slide 6: Research & Evaluation -->
|
|
<div class="slide" id="slide6">
|
|
<h2>Research & Evaluation</h2>
|
|
<p class="lead">Measuring humor effectiveness and AI capabilities</p>
|
|
|
|
<h3>Research Questions</h3>
|
|
<div class="project-info">
|
|
<p>1. Can AI consistently generate humor that humans find funny?</p>
|
|
<p>2. How does contextual awareness affect joke reception?</p>
|
|
<p>3. What metrics best measure "successful" AI-generated humor?</p>
|
|
</div>
|
|
|
|
<h3>Evaluation Methods</h3>
|
|
<ul class="simple-list">
|
|
<li>User satisfaction surveys (1-5 ratings)</li>
|
|
<li>Laughter/amusement detection in follow-up messages</li>
|
|
<li>A/B testing different joke generation approaches</li>
|
|
<li>Long-term engagement tracking</li>
|
|
<li>Cultural appropriateness assessments</li>
|
|
</ul>
|
|
|
|
<h3>Expected Contributions</h3>
|
|
<div class="benefit-item">
|
|
<p><strong>To AI Research:</strong> Insights into humor generation and natural language understanding.</p>
|
|
<p><strong>To Practical Applications:</strong> A framework for creating engaging, personality-driven chatbots.</p>
|
|
<p><strong>To Human-Computer Interaction:</strong> Understanding how humor affects user engagement.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 7: Future Possibilities -->
|
|
<div class="slide active" id="slide7">
|
|
<div class="slide-header">
|
|
<h1>Future Possibilities</h1>
|
|
<p class="lead">Expanding the bot's capabilities and applications</p>
|
|
</div>
|
|
|
|
<div class="tech-section">
|
|
<h3>Expansion Opportunities</h3>
|
|
|
|
<div class="tech-item">
|
|
<div class="tech-icon">🌍</div>
|
|
<div class="tech-content">
|
|
<span class="tech-name">Multilingual Support</span>
|
|
<span class="tech-desc">Generate and understand jokes in multiple languages</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tech-item">
|
|
<div class="tech-icon">🎭</div>
|
|
<div class="tech-content">
|
|
<span class="tech-name">Personality Customization</span>
|
|
<span class="tech-desc">Allow users to select joke styles (sarcastic, wholesome, witty, etc.)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tech-item">
|
|
<div class="tech-icon">📊</div>
|
|
<div class="tech-content">
|
|
<span class="tech-name">Joke Analytics</span>
|
|
<span class="tech-desc">Track which jokes perform best and identify humor patterns</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tech-item">
|
|
<div class="tech-icon">🤝</div>
|
|
<div class="tech-content">
|
|
<span class="tech-name">Collaborative Joke Creation</span>
|
|
<span class="tech-desc">Allow users to co-create jokes with the AI</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tech-item">
|
|
<div class="tech-icon">🎮</div>
|
|
<div class="tech-content">
|
|
<span class="tech-name">Gamification</span>
|
|
<span class="tech-desc">Add joke-telling games and humor challenges</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tech-item">
|
|
<div class="tech-icon">🎨</div>
|
|
<div class="tech-content">
|
|
<span class="tech-name">Visual Humor</span>
|
|
<span class="tech-desc">Generate memes and visual jokes using image generation AI</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="benefit-item">
|
|
<p><strong>Academic Value:</strong> This project contributes to understanding AI's creative capabilities and human-AI interaction dynamics.</p>
|
|
<p><strong>Practical Applications:</strong> Beyond entertainment, humor-generation AI has applications in mental health, education, and customer service.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<div class="navigation">
|
|
<button class="nav-btn" id="prev-btn" onclick="prevSlide()">← Back</button>
|
|
|
|
<div class="slide-counter">
|
|
<span id="current-slide">7</span> of <span id="total-slides">7</span>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="progress-fill" style="width: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="nav-btn" id="next-btn" onclick="nextSlide()" disabled="">Finish</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let currentSlide = 1;
|
|
const totalSlides = 7;
|
|
|
|
function showSlide(slideNumber) {
|
|
// Hide all slides
|
|
document.querySelectorAll('.slide').forEach(slide => {
|
|
slide.classList.remove('active');
|
|
});
|
|
|
|
// Show selected slide
|
|
document.getElementById(`slide${slideNumber}`).classList.add('active');
|
|
|
|
// Scroll to top of slide
|
|
document.getElementById(`slide${slideNumber}`).scrollTop = 0;
|
|
|
|
// Update slide counter
|
|
document.getElementById('current-slide').textContent = slideNumber;
|
|
document.getElementById('total-slides').textContent = totalSlides;
|
|
|
|
// Update progress bar
|
|
const progressPercentage = (slideNumber / totalSlides) * 100;
|
|
document.getElementById('progress-fill').style.width = `${progressPercentage}%`;
|
|
|
|
// Update button states
|
|
document.getElementById('prev-btn').disabled = slideNumber === 1;
|
|
document.getElementById('next-btn').disabled = slideNumber === totalSlides;
|
|
|
|
// Update button text on last slide
|
|
if (slideNumber === totalSlides) {
|
|
document.getElementById('next-btn').textContent = 'Finish';
|
|
} else {
|
|
document.getElementById('next-btn').textContent = 'Next →';
|
|
}
|
|
}
|
|
|
|
function nextSlide() {
|
|
if (currentSlide < totalSlides) {
|
|
currentSlide++;
|
|
showSlide(currentSlide);
|
|
}
|
|
}
|
|
|
|
function prevSlide() {
|
|
if (currentSlide > 1) {
|
|
currentSlide--;
|
|
showSlide(currentSlide);
|
|
}
|
|
}
|
|
|
|
// Initialize
|
|
showSlide(1);
|
|
|
|
// Keyboard navigation
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'Enter') {
|
|
nextSlide();
|
|
} else if (e.key === 'ArrowLeft') {
|
|
prevSlide();
|
|
}
|
|
});
|
|
|
|
// Touch swipe for mobile
|
|
let touchStartY = 0;
|
|
let touchEndY = 0;
|
|
|
|
document.addEventListener('touchstart', (e) => {
|
|
touchStartY = e.changedTouches[0].screenY;
|
|
});
|
|
|
|
document.addEventListener('touchend', (e) => {
|
|
touchEndY = e.changedTouches[0].screenY;
|
|
handleSwipe();
|
|
});
|
|
|
|
function handleSwipe() {
|
|
const swipeThreshold = 100;
|
|
|
|
if (touchEndY < touchStartY - swipeThreshold) {
|
|
// Swipe up - next slide
|
|
nextSlide();
|
|
}
|
|
|
|
if (touchEndY > touchStartY + swipeThreshold) {
|
|
// Swipe down - previous slide
|
|
prevSlide();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</body></html> |