Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/ToonTalk/AI
Browse files Browse the repository at this point in the history
  • Loading branch information
@ToonTalk
ToonTalk committed Oct 18, 2024
2 parents 75e72e1 + 1746b21 commit aacd368
Show file tree
Hide file tree
Showing 226 changed files with 20,834 additions and 130 deletions.
77 changes: 77 additions & 0 deletions apps/Ani by 4o/animation.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
const canvas = document.getElementById('animationCanvas');
const ctx = canvas.getContext('2d');

const C = { x: 100, y: 300, radius: 20, color: '#3498db', speed: 1, pause: false }; // Circle
const S = { x: 400, y: 300, size: 40, color: '#e74c3c', speed: 0.5, moving: true }; // Triangle
const P = { x: 700, y: 300, width: 30, height: 60, color: '#f1c40f' }; // Rectangle

function drawCircle(c) {
ctx.beginPath();
ctx.arc(c.x, c.y, c.radius, 0, Math.PI * 2);
ctx.fillStyle = c.color;
ctx.fill();
ctx.closePath();
}

function drawTriangle(s) {
ctx.beginPath();
ctx.moveTo(s.x, s.y - s.size / 2);
ctx.lineTo(s.x - s.size / 2, s.y + s.size / 2);
ctx.lineTo(s.x + s.size / 2, s.y + s.size / 2);
ctx.fillStyle = s.color;
ctx.fill();
ctx.closePath();
}

function drawRectangle(p) {
ctx.beginPath();
ctx.rect(p.x - p.width / 2, p.y - p.height / 2, p.width, p.height);
ctx.fillStyle = p.color;
ctx.fill();
ctx.closePath();
}

function updatePositions() {
if (!C.pause) {
if (C.x < S.x - 50) {
C.x += C.speed; // C moves towards the right
} else if (C.x >= S.x - 50 && S.x <= P.x - 50) {
S.x -= S.speed; // S moves towards the left to block C
if (S.x - C.x < 50) {
C.x -= 2; // C is pushed back
C.pause = true;
setTimeout(() => C.pause = false, 1000); // Pause C for 1 second
}
} else if (S.x < P.x - 50) {
S.moving = false; // S stops moving when near P
}
}

// Reset positions for continuous loop
if (C.x >= canvas.width) {
C.x = 0;
}
if (S.x <= 0) {
S.x = canvas.width;
}
}

function drawObjects() {
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw objects that C interacts with
ctx.fillStyle = '#2ecc71';
ctx.fillRect(200, 290, 20, 20); // Example object

drawCircle(C);
drawTriangle(S);
drawRectangle(P);
updatePositions();
}

function animate() {
drawObjects();
requestAnimationFrame(animate);
}

animate();
25 changes: 25 additions & 0 deletions apps/Ani by 4o/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Geometric Shapes Animation</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="animationCanvas" width="800" height="600"></canvas>
<script src="animation.js"></script>
</body>
</html>
109 changes: 109 additions & 0 deletions apps/Ani by Claude 3.5/geometric-shapes-animation.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Geometric Shapes Animation - S's Effective Barrier</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #f0f0f0;
}
#animation-container {
width: 100vw;
height: 100vh;
position: relative;
}
.shape {
position: absolute;
}
#character-c {
width: 60px;
height: 60px;
background-color: #ffd1dc;
clip-path: polygon(50% 0%, 80% 40%, 100% 100%, 0 100%, 20% 40%);
opacity: 0.8;
}
#character-s {
width: 80px;
height: 80px;
background-color: #4a0e4e;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
#character-p {
width: 70px;
height: 70px;
background-color: #ffd700;
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
#barrier {
position: absolute;
width: 10px;
height: 0;
background-color: #4a0e4e;
opacity: 0;
}
</style>
</head>
<body>
<div id="animation-container">
<div id="character-c" class="shape"></div>
<div id="character-s" class="shape"></div>
<div id="character-p" class="shape"></div>
<div id="barrier"></div>
</div>

<script>
const container = document.getElementById('animation-container');
const characterC = document.getElementById('character-c');
const characterS = document.getElementById('character-s');
const characterP = document.getElementById('character-p');
const barrier = document.getElementById('barrier');

// Initial positions
gsap.set(characterC, { x: '10%', y: '70%', opacity: 0 });
gsap.set(characterS, { x: '150%', y: '30%', opacity: 0 });
gsap.set(characterP, { x: '150%', y: '70%', opacity: 0 });
gsap.set(barrier, { x: '50%', y: '50%', opacity: 0 });

// Animation timeline
const tl = gsap.timeline();

// Scene 1: C and S interaction (abbreviated for brevity)
tl.to(characterC, { duration: 1, opacity: 1, ease: 'power1.inOut' })
.to(characterS, { duration: 1, opacity: 1, x: '70%', ease: 'power2.in' }, '+=1')
.to(characterC, { duration: 1, scale: 0.8, ease: 'back.out(1.7)' })
.to(characterS, { duration: 2, x: '60%', y: '40%', ease: 'power1.inOut' })
.to(characterC, { duration: 2, x: '30%', y: '75%', ease: 'power1.inOut' }, '<');

// Scene 2: C wants to meet P, S prevents it
tl.to(characterP, { duration: 1, opacity: 1, x: '90%', ease: 'power1.inOut' }, '+=1')
// C and P try to meet
.to(characterC, { duration: 2, x: '45%', y: '60%', scale: 1.1, ease: 'sine.inOut' })
.to(characterP, { duration: 2, x: '55%', y: '60%', scale: 1.1, ease: 'sine.inOut' }, '<')
// S moves to block and creates barrier
.to(characterS, { duration: 1, x: '50%', y: '50%', scale: 1.2, ease: 'power2.out' })
.to(barrier, { duration: 0.5, opacity: 1, height: '100vh', ease: 'power2.out' }, '<')
// Barrier expands from S
.to(barrier, { duration: 1, width: '40vw', x: '30%', ease: 'power2.out' })
// C and P are pushed back
.to(characterC, { duration: 1, x: '20%', y: '80%', scale: 0.7, backgroundColor: '#d3aeb6', ease: 'back.in(1.7)' }, '-=0.5')
.to(characterP, { duration: 1, x: '80%', y: '65%', ease: 'back.out(1.7)' }, '<')
// C and P try to meet again
.to(characterC, { duration: 1.5, x: '25%', y: '70%', scale: 0.9, ease: 'power1.inOut' }, '+=0.5')
.to(characterP, { duration: 1.5, x: '75%', y: '70%', scale: 0.9, ease: 'power1.inOut' }, '<')
// S reinforces the barrier
.to(characterS, { duration: 1, scale: 1.3, ease: 'elastic.out(1, 0.3)' })
.to(barrier, { duration: 0.5, width: '60vw', x: '20%', ease: 'power2.out' }, '<')
// C becomes very unhappy, P is frustrated
.to(characterC, { duration: 1, x: '10%', y: '85%', rotation: -90, scale: 0.5, opacity: 0.6, ease: 'power1.out' })
.to(characterP, { duration: 1, x: '90%', y: '70%', rotation: 45, scale: 0.8, ease: 'power1.out' }, '<')
// S celebrates
.to(characterS, { duration: 2, rotation: 360, y: '30%', ease: 'bounce.out' })
.to(barrier, { duration: 0.5, opacity: 0, width: '10px', x: '50%', ease: 'power2.in' }, '<');

</script>
</body>
</html>
55 changes: 28 additions & 27 deletions apps/Connections-v2/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,21 +178,14 @@ document.getElementById('initializeGame').addEventListener('click', async functi
break;
case 'gemini':
result = await geminiNano(fullPrompt);
if (result === undefined) { // Assume geminiNano() handles its own errors
throw new Error("Session creation or prompt failed in Gemini Nano.");
}
break;
default:
throw new Error("Unsupported AI provider selected.");
}
handleApiResponse(result);
} catch (error) {
// Specific error handling for Gemini Nano or other API errors
console.error('Error during API interaction:', error);
// Only update the status message if it's not already set by the API-specific function
if (document.getElementById('statusMessage').textContent === "") {
updateStatusMessage(error.message, "invalid-message");
}
updateStatusMessage(error.message, "invalid-message");
} finally {
hideLoadingIcon();
}
Expand Down Expand Up @@ -358,36 +351,44 @@ function updateGameWithCategories(categories) {

let aiSession = null; // Global variable to hold the session

async function geminiNano(prompt) {
if (!aiSession) { // Check if session exists
try {
let canCreateSession = await window.ai.canCreateTextSession();
if (canCreateSession === "no") {
// Inform the user and provide a link to the documentation
const statusMessage = document.getElementById('statusMessage');
statusMessage.innerHTML = 'Unable to create an AI session. Please refer to the <a href="https://docs.google.com/document/d/1VG8HIyz361zGduWgNG7R_R8Xkv0OOJ8b5C9QKeCjU0c/edit?pli=1#heading=h.5s2qlonhpm36" target="_blank">documentation</a> for more information.';
statusMessage.className = 'invalid-message';
throw new Error("Session creation denied."); // Abort the function by throwing an error
}
aiSession = await window.ai.createTextSession(); // Create a session if possible
} catch (error) {
// console.error('Error checking session capability:', error);
const statusMessage = document.getElementById('statusMessage');
statusMessage.innerHTML = 'Error checking AI session capability. Please refer to the <a href="https://docs.google.com/document/d/1VG8HIyz361zGduWgNG7R_R8Xkv0OOJ8b5C9QKeCjU0c/edit?pli=1#heading=h.5s2qlonhpm36" target="_blank">documentation</a> for troubleshooting.';
statusMessage.className = 'invalid-message';
throw error; // Re-throw to ensure the caller knows the function has failed
async function initializeAI() {
try {
const capabilities = await window.ai.assistant.capabilities();
if (capabilities.available === "readily" || capabilities.available === "after-download") {
aiSession = await window.ai.assistant.create();
console.log("AI session created successfully");
} else {
throw new Error("AI capabilities are not available on this device.");
}
} catch (error) {
console.error('Error initializing AI:', error);
const statusMessage = document.getElementById('statusMessage');
statusMessage.innerHTML = 'Error initializing AI. Please refer to the <a href="https://docs.google.com/document/d/1VG8HIyz361zGduWgNG7R_R8Xkv0OOJ8b5C9QKeCjU0c/edit?pli=1#heading=h.5s2qlonhpm36" target="_blank">documentation</a> for troubleshooting.';
statusMessage.className = 'invalid-message';
throw error;
}
}

async function geminiNano(prompt) {
if (!aiSession) {
await initializeAI();
}

try {
const result = await aiSession.prompt(prompt);
return result; // Return the AI's response
} catch (error) {
console.error('Error in aiPrompt:', error); // Log errors in aiPrompt
console.error('Error in Gemini Nano prompt:', error);
throw new Error("Error during AI interaction");
}
}

// Call this function when the page loads or when the user selects Gemini Nano
initializeAI().catch(error => {
console.error("Failed to initialize AI:", error);
// Handle the error appropriately in your UI
});

// Get the modal
var modal = document.getElementById("instructionsModal");

Expand Down
51 changes: 0 additions & 51 deletions apps/Gemini Nano - v1/chat.js
View file

This file was deleted.

Loading

0 comments on commit aacd368

Please sign in to comment.