Skip to content

Instantly share code, notes, and snippets.

@lillylangtree

lillylangtree/index.html

Created October 28, 2015 17:03
Show Gist options
  • Save lillylangtree/b55828fa05ed3470d352 to your computer and use it in GitHub Desktop.
Save lillylangtree/b55828fa05ed3470d352 to your computer and use it in GitHub Desktop.
Download ZIP
sample index.html file
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Spoon-Knife</title>
<LINK href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<img src="forkit.gif" id="octocat" alt="" />
<!-- Feel free to change this text here -->
<p>
Fork me? Fork you, @octocat!
</p>
<p>
Sean made a change
</p>
</body>
</html>
@ajaysingh132
Copy link

<title>AI Story Writing Tool</title> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <style> .regenerateIcon, .copyIcon { cursor: pointer; display: inline-block; margin-left: 10px; font-size: 20px; /* Adjust size as needed */ } body { font-family: 'Arial', sans-serif; background-color: #f2f2f2; margin: 0; padding: 20px; box-sizing: border-box; } #chatContainer { background-color: #fff; border-radius: 8px; overflow: hidden; width: 100%; max-width: 800px; margin: auto; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding-bottom: 10px; /* Add some padding at the bottom */ } #chatHeader { width: 100%; padding: 10px; margin-bottom: 20px; border-radius: 8px; border: none; color: white; text-align: center; font-size: 16px; cursor: pointer; background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%); transition: all 0.3s ease; text-decoration: none; display: inline-block; text-align: center; } #chatBody { padding: 20px; max-height: 300px; overflow-y: auto; } .messageContainer { display: flex; justify-content: flex-end; margin-bottom: 10px; } .message { background-color: #e2f0cb; padding: 10px; border-radius: 5px; max-width: 70%; word-wrap: break-word; } #prompt { width: calc(100% - 40px - 10px); margin: 10px 20px; padding: 12px; border-radius: 5px; border: 1px solid #ccc; } button { width: calc(100% - 20px); padding: 10px; margin: 10px; border-radius: 8px; border: none; color: white; text-align: center; font-size: 15px; cursor: pointer; background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%); transition: all 0.3s ease; text-decoration: none; display: inline-block; text-align: center; } button:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } #storyCategory, #languageSelection { width: calc(50% - 25px); /* Adjust width to fit side by side with some space */ padding: 10px; margin: 10px; border-radius: 5px; border: 1px solid #ccc; background-color: #fff; font-family: 'Arial', sans-serif; font-size: 16px; box-sizing: border-box; /* Ensure padding and border are included in width */ display: inline-block; /* Display side by side */ cursor: pointer; } #storyCategory:disabled, #languageSelection:disabled { background-color: #e9ecef; cursor: not-allowed; } #progressOverlay { display: none; /* Initially hidden */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000; } #progressOverlay > div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 20px; } .formatted-text { white-space: pre-wrap; /* Keeps white space and line breaks */ } .formatted-text a { color: #007bff; text-decoration: none; } .formatted-text a:hover { text-decoration: underline; } .message.code { background-color: #f5f5f5; /* Light grey background */ color: #333; /* Darker text for contrast */ font-family: monospace; /* Monospace font for code-like appearance */ white-space: pre-wrap; /* Allows text to wrap and preserves formatting */ word-wrap: break-word; /* Allows long lines to break and wrap to the next line */ padding: 10px; /* Padding inside the preformatted text block */ border-radius: 5px; /* Rounded corners like other messages */ } </style>
AI Story Writing Tool
Moral Default (English) <textarea id="prompt" placeholder="Type a message..." rows="3"></textarea> Generate Story
Thinking...
<script> function generateStory() { var prompt = $("#prompt").val(); var category = $("#storyCategory").val(); var language = $("#languageSelection").val(); var storyPrompt = `Write a ${category} story for "${prompt}" in ${language} language`; $('#progressOverlay').show(); // Show progress overlay 
        var apiKey = 'your_api_key'; // Replace with your actual OpenAI API key
        var apiUrl = 'https://api.openai.com/v1/chat/completions';
        var requestBody = {
            model: 'gpt-3.5-turbo',
            messages: [{
                role: 'user',
                content: storyPrompt
            }],
            temperature: 0.7
        };

        $.ajax({
            type: 'POST',
            url: apiUrl,
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + apiKey
            },
            data: JSON.stringify(requestBody),
            success: function(response) {
                $('#progressOverlay').hide(); // Hide progress overlay
                addTypewriterEffect(response.choices[0].message.content, 'chatBody');
            },
            error: function(error) {
                $('#progressOverlay').hide(); // Hide progress overlay on error
                console.error('Error generating story:', error);
            }
        });
    }

    function formatResponseText(text) {
        text = text.replace(/(https?:\/\/[^\s]+)/g, '<a href="$1" target="_blank">$1</a>');
        text = text.replace(/^##\s?(.+)/gm, '<strong>$1</strong>');
        text = text.replace(/^(\s*(?:-|\*|\d+\.)\s+.+)$/gm, '$1<br>');
        return text;
    }

    function addTypewriterEffect(text, elementId) {
        var formattedText = formatResponseText(text);
        var container = $('<div class="messageContainer"></div>').appendTo('#' + elementId);
        var message = $('<div class="message formatted-text" style="background-color: #f5f5f5;"></div>').appendTo(container);
        var i = 0;
        var speed = 10; // Typing speed in milliseconds
        function typeWriter() {
            if (i < formattedText.length) {
                var charToAdd = formattedText.charAt(i);
                if (formattedText.substring(i).startsWith('<a href=') || formattedText.substring(i).startsWith('<br>') || formattedText.substring(i).startsWith('<strong>')) {
                    var tagEnd = formattedText.indexOf('>', i) + 1;
                    charToAdd = formattedText.substring(i, tagEnd);
                    i = tagEnd;
                } else if (formattedText.charAt(i) === '<') {
                    var tagEnd = formattedText.indexOf('>', i) + 1;
                    charToAdd = formattedText.substring(i, tagEnd);
                    i = tagEnd - 1;
                }
                message.append(charToAdd);
                i++;
                setTimeout(typeWriter, speed);
            } else {
                var copyIcon = $('<div class="copyIcon">📋</div>').appendTo(container);
                copyIcon.click(function() {
                    var textToCopy = message.text();
                    navigator.clipboard.writeText(textToCopy).then(function() {
                        alert('Text copied to clipboard!');
                    }, function(err) {
                        console.error('Could not copy text: ', err);
                    });
                });
                var regenerateIcon = $('<div class="regenerateIcon">&#x1F501;</div>').appendTo(container);
                regenerateIcon.click(function() {
                    $('#chatBody').html(''); // Clear the previous messages
                    generateStory(); // Call generateStory function to regenerate the story
                });
            }
        }
        typeWriter();
    }
</script>

@ajaysingh132
Copy link

@wiczka212
Copy link

index.html

@terrainfnffnf
Copy link

i dunno

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment