diff --git a/README.md b/README.md index 329f9fe..65fe9b2 100644 --- a/README.md +++ b/README.md @@ -1,33 +1,40 @@ -# GitHub Models - Limited Public Beta - -Welcome to your shiny new Codespace for interacting with GitHub Models! We've got everything fired up and ready for you to explore AI Models hosted on Azure AI. - -The git history is a nearly-blank canvas; there's a single initial commit with the contents you're seeing right now - where you go from here is up to you! - -Everything you do here is contained within this one codespace. There is no repository on GitHub yet. When you’re ready, you can click "Publish Branch" and we’ll create your repository and push up your project. If you were just exploring and have no further need for this code, you can simply delete your codespace and it's gone forever. - -For more information about the Models available on GitHub Models, check out the [Marketplace](https://github.com/marketplace/models). - -When bringing your application to scale, you must provision resources and authenticate from Azure, not GitHub. Learn more about deploying models to meet your use case with Azure AI. - -## Getting Started - -There are a few basic examples that are ready for you to run. You can find them in the [samples directory](samples/README.md). If you want to jump straight to your favorite language, you can find the examples in the following directories: - -- [JavaScript](samples/js/README.md) -- [Python](samples/python/README.md) -- [cURL](samples/curl/README.md) - -If you are already familiar with the GitHub Models service, you can start by running our Cookbook examples. You can find them in the [cookbooks directory](cookbooks/README.md). Here are the direct links to the available languages (at this point only Python): - -- [Python](cookbooks/python/README.md) - -## Disclosures - -Remember when interacting with a model you are experimenting with AI, so content mistakes are possible. - -The feature is subject to various limits (including requests per minute, requests per day, tokens per request, and concurrent requests) and is not designed for production use cases. - -GitHub Models uses [Azure AI Content Safety](https://azure.microsoft.com/en-us/products/ai-services/ai-content-safety). These filters cannot be turned off as part of the GitHub Models experience. If you decide to employ models through a paid service, please configure your content filters to meet your requirements. - -This service is under GitHub’s [Pre-release Terms](https://docs.github.com/en/site-policy/github-terms/github-pre-release-license-terms). Your use of the GitHub Models is subject to the following [Product Terms](https://www.microsoft.com/licensing/terms/productoffering/MicrosoftAzure/allprograms) and [Privacy Statement](https://www.microsoft.com/licensing/terms/product/PrivacyandSecurityTerms/MCA). Content within this Repository may be subject to additional license terms. +[ + { + "timestamp": "2025-06-05T02:11:45.285Z", + "role": "user", + "message": "\n\n\n \n \n Para Ti 🥳\n \n\n\n
\n
\n
💖
\n

Desbloquea tu Regalo Especial

\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n
\n\n
\n

FELIZ CUMPLE THAIS

\n
\n
🌹
\n
\n
\n
\n
\n
\n
\n
\n \n \n
\n
\n \n
\n
\n\n \n\n " + }, + { + "timestamp": "2025-06-05T02:11:56.424Z", + "role": "assistant", + "message": "¡Perfecto! Aquí tienes un ejemplo de cómo podrías estructurar tu archivo `style.css` para darle estilo a tu página web:\n\n```css\n/* style.css */\n\nbody {\n font-family: Arial, sans-serif;\n background-color: #f0f0f0;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n}\n\n.lock-screen {\n background-color: #fff;\n border-radius: 10px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n padding: 20px;\n text-align: center;\n width: 300px;\n}\n\n.lock-content {\n margin-bottom: 20px;\n}\n\n.heart-icon {\n font-size: 50px;\n color: #ff69b4;\n}\n\nh1 {\n font-size: 24px;\n margin: 10px 0;\n}\n\n#pin-display {\n font-size: 24px;\n margin: 10px 0;\n}\n\n.keypad {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n}\n\n.keypad button {\n width: 50px;\n height: 50px;\n font-size: 24px;\n margin: 5px;\n border: none;\n border-radius: 5px;\n background-color: #007bff;\n color: #fff;\n cursor: pointer;\n}\n\n.keypad button:hover {\n background-color: #0056b3;\n}\n\n#error-message {\n color: red;\n margin-top: 10px;\n}\n\n.main-content {\n background-color: #fff;\n border-radius: 10px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n padding: 20px;\n text-align: center;\n width: 300px;\n}\n\n.envelope-container {\n display: flex;\n justify-content: center;\n align-items: center;\n margin-top: 20px;\n}\n\n.heart-main {\n font-size: 50px;\n color: #ff69b4;\n}\n\n.envelope {\n position: relative;\n width: 200px;\n height: 250px;\n background-color: #fff;\n border: 2px solid #007bff;\n border-radius: 10px;\n margin-left: 20px;\n}\n\n.envelope-top,\n.envelope-bottom {\n width: 100%;\n height: 50%;\n background-color: #007bff;\n border-radius: 10px;\n}\n\n.envelope-top {\n height: 50%;\n}\n\n.envelope-bottom {\n height: 50%;\n}\n\n.letter {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 100%;\n height: 100%;\n background-color: #fff;\n padding: 20px;\n box-sizing: border-box;\n border-radius: 10px;\n}\n\n.buttons-container {\n display: flex;\n justify-content: center;\n margin-top: 20px;\n}\n\n.button {\n width: 100px;\n height: 50px;\n font-size: 18px;\n margin: 5px;\n border: none;\n border-radius: 5px;\n background-color: #007bff;\n color: #fff;\n cursor: pointer;\n}\n\n.button:hover {\n background-color: #0056b3;\n}\n\n#music-player {\n margin-top: 20px;\n}\n\n#music-player iframe {\n width: 100%;\n height: 100%;\n}\n```\n\nEste archivo CSS proporciona estilos básicos para tu página web, incluyendo el diseño de la pantalla de bloqueo y el contenido principal. Puedes ajustar los estilos según tus necesidades para que se vean más atractivos y coherentes con el tema de tu página." + }, + { + "timestamp": "2025-06-05T02:12:24.707Z", + "role": "user", + "message": "\n\n\n \n \n Para Ti 🥳\n \n\n\n
\n
\n
💖
\n

Desbloquea tu Regalo Especial

\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n
\n\n
\n

FELIZ CUMPLE THAIS

\n
\n
🌹
\n
\n
\n
\n
\n
\n
\n
\n \n \n
\n
\n \n
\n
\n\n \n\n" + }, + { + "timestamp": "2025-06-05T02:12:31.676Z", + "role": "assistant", + "message": "¡Perfecto! Aquí tienes un ejemplo de cómo podrías estructurar tu archivo `script.js` para manejar la lógica de tu página web:\n\n```javascript\n// script.js\n\ndocument.addEventListener('DOMContentLoaded', () => {\n const pinDisplay = document.getElementById('pin-display');\n const keypad = document.getElementById('keypad');\n const errorMessage = document.getElementById('error-message');\n const mainContent = document.getElementById('main-content');\n const buttonsContainer = document.getElementById('buttons-container');\n const readButton = document.getElementById('read-button');\n const musicButton = document.getElementById('music-button');\n const musicPlayer = document.getElementById('music-player');\n const letterContent = document.getElementById('letter-content');\n\n let pin = '';\n const correctPin = '1234'; // Cambia esto por el PIN correcto\n\n function appendPin(digit) {\n if (pin.length < 4) {\n pin += digit;\n pinDisplay.textContent = pin;\n }\n }\n\n function clearPin() {\n pin = '';\n pinDisplay.textContent = '';\n }\n\n function checkPin() {\n if (pin === correctPin) {\n mainContent.style.display = 'block';\n keypad.style.display = 'none';\n errorMessage.textContent = '';\n } else {\n errorMessage.textContent = 'PIN incorrecto. Inténtalo de nuevo.';\n }\n }\n\n readButton.addEventListener('click', () => {\n letterContent.textContent = '¡Feliz cumpleaños, Tía! 🎉';\n buttonsContainer.style.display = 'block';\n });\n\n musicButton.addEventListener('click', () => {\n musicPlayer.style.display = 'block';\n musicPlayer.querySelector('iframe').src = 'https://www.youtube.com/embed/dQw4w9WgXcQ'; // Cambia esto por la URL de tu video de música\n });\n});\n```\n\nEste archivo JavaScript maneja la lógica de entrada de PIN, verificación del PIN, y la visualización del contenido principal y la música. Aquí hay una breve descripción de lo que hace cada función:\n\n1. **appendPin(digit)**: Añade un dígito al PIN actual.\n2. **clearPin()**: Limpia el PIN actual.\n3. **checkPin()**: Verifica si el PIN ingresado es correcto. Si es correcto, muestra el contenido principal; si no, muestra un mensaje de error.\n4. **readButton.addEventListener('click')**: Muestra el contenido del mensaje de cumpleaños y los botones adicionales.\n5. **musicButton.addEventListener('click')**: Muestra el reproductor de música y carga un video de YouTube.\n\nPuedes ajustar el PIN correcto y la URL del video de música según tus necesidades." + }, + { + "timestamp": "2025-06-05T02:14:05.055Z", + "role": "user", + "message": "let pin = '';\nconst correctPin = '*33*';\n\nfunction appendPin(number) {\n pin += number;\n document.getElementById('pin-display').innerText = pin;\n}\n\nfunction clearPin() {\n pin = '';\n document.getElementById('pin-display').innerText = '';\n document.getElementById('error-message').innerText = '';\n}\n\nfunction checkPin() {\n if (pin === correctPin) {\n document.getElementById('lock-screen').style.display = 'none';\n document.getElementById('main-content').style.display = 'block';\n document.getElementById('buttons-container').style.display = 'flex';\n } else {\n document.getElementById('error-message').innerText = 'PIN incorrecto. Intenta de nuevo.';\n clearPin();\n }\n}\n\ndocument.getElementById('read-button').addEventListener('click', function () {\n const letterContent = `\nHoy, 29 de agosto, no podía dejar pasar este día sin escribirte. Aunque la distancia —y quizás el silencio pero bueno—\n\nCumplís un año más de vida, y espero de corazón que llegue cargado de luz, salud, momentos que te llenen el alma y personas que te recuerden lo increíble que sos. Aunque ya no esté cerca, aunque nuestras palabras hayan dejado de cruzarse como antes, lo que fuiste y lo que significaste no se borra. Fuiste importante, lo sos, y lo serás de alguna forma siempre.\n\nTe deseo lo mejor de lo mejor, no solo hoy, sino cada día que el mundo tenga la suerte de tenerte en él. Que la vida te abrace con lo que merecés y que sigas creciendo, brillando y alcanzando todo lo que te propongas.\n\nGracias por haber sido parte de mi vida, y por todo lo que dejaste en mí. Hoy, desde lejos, te mando un abrazo silencioso pero real, deseando que seas feliz, sinceramente.\n\nFeliz cumpleaños, Thais.\n\nATT: Maycol.i\n `;\n document.getElementById('letter-content').innerText = letterContent;\n});\n\ndocument.getElementById('music-button').addEventListener('click', function () {\n const player = document.getElementById('music-player');\n const iframe = player.querySelector('iframe');\n iframe.src = \"https://www.youtube.com/embed/gFZfwWZV074?autoplay=1\";\n player.style.display = 'block';\n});\n\n// 🎊 Corazones que caen\nsetInterval(() => {\n const heart = document.createElement(\"div\");\n heart.className = \"heart\";\n heart.innerText = \"🎊\";\n heart.style.position = \"fixed\";\n heart.style.left = Math.random() * 100 + \"vw\";\n heart.style.top = \"-20px\";\n heart.style.fontSize = (Math.random() * 20 + 10) + \"px\";\n heart.style.animation = \"fall 5s linear forwards\";\n document.body.appendChild(heart);\n setTimeout(() => heart.remove(), 5000);\n}, 300);" + }, + { + "timestamp": "2025-06-05T02:14:11.669Z", + "role": "assistant", + "message": "¡Perfecto! Aquí tienes un ejemplo de cómo podrías estructurar tu archivo `style.css` para darle estilo a tu página web:\n\n```css\n/* style.css */\n\nbody {\n font-family: Arial, sans-serif;\n background-color: #f0f0f0;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n}\n\n.lock-screen {\n background-color: #fff;\n border-radius: 10px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n padding: 20px;\n text-align: center;\n width: 300px;\n}\n\n.lock-content {\n margin-bottom: 20px;\n}\n\n.heart-icon {\n font-size: 50px;\n color: #ff69b4;\n}\n\nh1 {\n font-size: 24px;\n margin: 10px 0;\n}\n\n#pin-display {\n font-size: 24px;\n margin: 10px 0;\n}\n\n.keypad {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n}\n\n.keypad button {\n width: 50px;\n height: 50px;\n font-size: 24px;\n margin: 5px;\n border: none;\n border-radius: 5px;\n background-color: #007bff;\n color: #fff;\n cursor: pointer;\n}\n\n.keypad button:hover {\n background-color: #0056b3;\n}\n\n#error-message {\n color: red;\n margin-top: 10px;\n}\n\n.main-content {\n background-color: #fff;\n border-radius: 10px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n padding: 20px;\n text-align: center;\n width: 300px;\n}\n\n.envelope-container {\n display: flex;\n justify-content: center;\n align-items: center;\n margin-top: 20px;\n}\n\n.heart-main {\n font-size: 50px;\n color: #ff69b4;\n}\n\n.envelope {\n position: relative;\n width: 200px;\n height: 250px;\n background-color: #fff;\n border: 2px solid #007bff;\n border-radius: 10px;\n margin-left: 20px;\n}\n\n.envelope-top,\n.envelope-bottom {\n width: 100%;\n height: 50%;\n background-color: #007bff;\n border-radius: 10px;\n}\n\n.envelope-top {\n height: 50%;\n}\n\n.envelope-bottom {\n height: 50%;\n}\n\n.letter {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 100%;\n height: 100%;\n background-color: #fff;\n padding: 20px;\n box-sizing: border-box;\n border-radius: 10px;\n}\n\n.buttons-container {\n display: flex;\n justify-content: center;\n margin-top: 20px;\n}\n\n.button {\n width: 100px;\n height: 50px;\n font-size: 18px;\n margin: 5px;\n border: none;\n border-radius: 5px;\n background-color: #007bff;\n color: #fff;\n cursor: pointer;\n}\n\n.button:hover {\n background-color: #0056b3;\n}\n\n#music-player {\n margin-top: 20px;\n}\n\n#music-player iframe {\n width: 100%;\n height: 100%;\n}\n\n.heart {\n position: absolute;\n animation: fall 5s linear forwards;\n}\n\n@keyframes fall {\n 0% {\n transform: translateY(-100%);\n opacity: 1;\n }\n 100% {\n transform: translateY(100%);\n opacity: 0;\n }\n}\n```\n\nEste archivo CSS proporciona estilos básicos para tu página web, incluyendo el diseño de la pantalla de bloqueo y el contenido principal. Puedes ajustar los estilos según tus necesidades para que se vean más atractivos y coherentes con el tema de tu página.\n\nAdemás, el CSS incluye una animación para los corazones que caen, que se activa cada 300 milisegundos." + }, + { + "timestamp": "2025-06-05T02:14:41.828Z", + "role": "user", + "message": "let pin = '';\nconst correctPin = '*33*';\n\nfunction appendPin(number) {\n pin += number;\n document.getElementById('pin-display').innerText = pin;\n}\n\nfunction clearPin() {\n pin = '';\n document.getElementById('pin-display').innerText = '';\n document.getElementById('error-message').innerText = '';\n}\n\nfunction checkPin() {\n if (pin === correctPin) {\n document.getElementById('lock-screen').style.display = 'none';\n document.getElementById('main-content').style.display = 'block';\n document.getElementById('buttons-container').style.display = 'flex';\n } else {\n document.getElementById('error-message').innerText = 'PIN incorrecto. Intenta de nuevo.';\n clearPin();\n }\n}\n\ndocument.getElementById('read-button').addEventListener('click', function () {\n const letterContent = `\nHoy, 29 de agosto, no podía dejar pasar este día sin escribirte. Aunque la distancia —y quizás el silencio pero bueno—\n\nCumplís un año más de vida, y espero de corazón que llegue cargado de luz, salud, momentos que te llenen el alma y personas que te recuerden lo increíble que sos. Aunque ya no esté cerca, aunque nuestras palabras hayan dejado de cruzarse como antes, lo que fuiste y lo que significaste no se borra. Fuiste importante, lo sos, y lo serás de alguna forma siempre.\n\nTe deseo lo mejor de lo mejor, no solo hoy, sino cada día que el mundo tenga la suerte de tenerte en él. Que la vida te abrace con lo que merecés y que sigas creciendo, brillando y alcanzando todo lo que te propongas.\n\nGracias por haber sido parte de mi vida, y por todo lo que dejaste en mí. Hoy, desde lejos, te mando un abrazo silencioso pero real, deseando que seas feliz, sinceramente.\n\nFeliz cumpleaños, Thais.\n\nATT: Maycol.i\n `;\n document.getElementById('letter-content').innerText = letterContent;\n});\n\ndocument.getElementById('music-button').addEventListener('click', function () {\n const player = document.getElementById('music-player');\n const iframe = player.querySelector('iframe');\n iframe.src = \"https://www.youtube.com/embed/gFZfwWZV074?autoplay=1\";\n player.style.display = 'block';\n});\n\n// 🎊 Corazones que caen\nsetInterval(() => {\n const heart = document.createElement(\"div\");\n heart.className = \"heart\";\n heart.innerText = \"🎊\";\n heart.style.position = \"fixed\";\n heart.style.left = Math.random() * 100 + \"vw\";\n heart.style.top = \"-20px\";\n heart.style.fontSize = (Math.random() * 20 + 10) + \"px\";\n heart.style.animation = \"fall 5s linear forwards\";\n document.body.appendChild(heart);\n setTimeout(() => heart.remove(), 5000);\n}, 300);" + }, + { + "timestamp": "2025-06-05T02:14:48.161Z", + "role": "assistant", + "message": "¡Perfecto! Aquí tienes un ejemplo de cómo podrías estructurar tu archivo `style.css` para darle estilo a tu página web:\n\n```css\n/* style.css */\n\nbody {\n font-family: Arial, sans-serif;\n background-color: #f0f0f0;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n}\n\n.lock-screen {\n background-color: #fff;\n border-radius: 10px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n padding: 20px;\n text-align: center;\n width: 300px;\n}\n\n.lock-content {\n margin-bottom: 20px;\n}\n\n.heart-icon {\n font-size: 50px;\n color: #ff69b4;\n}\n\nh1 {\n font-size: 24px;\n margin: 10px 0;\n}\n\n#pin-display {\n font-size: 24px;\n margin: 10px 0;\n}\n\n.keypad {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n}\n\n.keypad button {\n width: 50px;\n h