Upload 4 files

Apache License.txt

@@ -0,0 +1,17 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   Copyright 2025 Shift Mind AI Labs
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

README.md

@@ -0,0 +1,95 @@
+---
+title: "✍️ Enhanced Collaborative Writing with AI"
+emoji: "🤝"
+colorFrom: "red"
+colorTo: "yellow"
+sdk: "static"
+sdk_version: "0.1.0"
+app_file: "index.html"
+pinned: false
+---
+
+# ✍️ Enhanced Collaborative Writing with AI  
+**Developed by Shift Mind AI Labs**
+
+Enhanced Collaborative Writing with AI is an open-source, privacy-first tool designed to empower students, teachers, and creative professionals to co-author texts with real-time AI support. With a wide range of roles, writing styles, and intelligent feedback powered by GPT-4o-mini, the tool supports academic, creative, technical, and storytelling tasks for all learners.
+
+---
+
+## 🚀 Features
+
+- **Multiple Writing Roles:** Choose from Literature Author, Academic Researcher, Journalist, Consultant, Storyteller, Creative Writer, Technical Writer, and more.
+- **AI Collaboration:** The AI generates contextually relevant text, continues ideas, expands, adds contrast, or moves toward conclusions.
+- **Personal & AI Contributions Highlighted:** Easily distinguish your own writing from AI-generated content.
+- **Rephrase & Revise:** Instantly rephrase AI contributions for better clarity, tone, or content.
+- **Writing Analytics:** Real-time stats on word count, character count, and number of AI contributions.
+- **Progress Tracking:** Visual panel for context and writing journey.
+- **Client-side Privacy:** All logic and data storage are local; your OpenAI API key and writing never leave your browser.
+
+---
+
+## 🛠 How to Use
+
+1. **Open the tool** in your browser (no installation or login required).
+2. **Enter your OpenAI API key** (your key is stored only in your browser for this session).
+3. **Choose your subject/topic and writing role/style.**
+4. **Start writing:**  
+   - Write and edit your own text.
+   - Use the AI to continue, expand, or rephrase as needed.
+   - Switch roles or styles for different genres.
+5. **Review statistics and progress** in real time.
+6. **Finish and export:**  
+   - Copy, download, or share your final document and process stats.
+
+---
+
+## 👩‍🏫 For Teachers: Classroom Applications
+
+- Collaborative essays, reports, and stories
+- Genre-based writing workshops
+- Feedback and revision practice
+- Differentiation for struggling and advanced writers
+- Evidence for formative assessment and writing portfolios
+
+---
+
+## 👨‍🎓 For Students: Benefits
+
+- Experiment with genres and voices
+- Build confidence and fluency
+- Learn from real-time AI modeling
+- Receive targeted, actionable feedback
+- Own your creative process with privacy and control
+
+---
+
+## 🔐 Data Privacy
+
+- Your OpenAI API key and all writing are only stored in your browser.
+- No data is transmitted to Shift Mind AI Labs, Hugging Face, or third parties.
+
+---
+
+## 📄 License
+
+Licensed under the [Apache License 2.0](./LICENSE).
+
+---
+
+## 🧠 About Shift Mind AI Labs
+
+Shift Mind AI Labs creates open-source, ethical AI tools to support creativity, education, and global learning.
+
+🌐 https://www.shiftmind.io  
+✉️ info@shiftmind.io
+
+---
+
+## 🙌 Contributing
+
+Pull requests, feedback, and collaborations are welcome!  
+For pilots, partnerships, or school integration: **info@shiftmind.io**
+
+---
+
+*Empowering every writer to collaborate, reflect, and grow—together with AI.*

index.html

@@ -0,0 +1,651 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Enhanced Collaborative Writing with AI (GPT-4o-mini)</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+    body { background: #f5f7fa; font-family: 'Segoe UI', Arial, sans-serif; color: #333; margin: 0; }
+    .container { max-width: 760px; margin: 40px auto; background: #fff; border-radius: 14px; box-shadow: 0 2px 18px rgba(44,62,80,0.10); padding: 36px 26px 22px 26px; }
+    h1 { text-align: center; color: #154360; }
+    label { font-weight: 500; margin-bottom: 7px; display: block; }
+    [contenteditable="true"] {
+      width: 100%; min-height: 180px; font-size: 1.07rem; border: 1px solid #bbb; border-radius: 7px;
+      padding: 13px; background: #f6fafd; margin-bottom: 12px; box-sizing: border-box; outline: none;
+      white-space: pre-wrap; line-height: 1.6;
+    }
+    .ai-text {
+      background: #fffac2;
+      color: #664d03;
+      border-radius: 4px;
+      padding: 0 2px;
+      margin-right:2px;
+      transition: background 0.3s;
+    }
+    .user-text {
+      background: #e4ffd5;
+      color: #217c33;
+      border-radius: 4px;
+      padding: 0 2px;
+      margin-right:2px;
+      transition: background 0.3s;
+    }
+    select, input[type="text"], input[type="password"] {
+      width: 98%; padding: 7px 1%; border-radius: 7px; border: 1px solid #bbb; font-size: 1rem; margin-bottom: 8px;
+    }
+    select { width: 99%; }
+    .role-desc {
+      background: #f8f8fa;
+      border-left: 5px solid #2471a3;
+      padding: 12px 16px;
+      border-radius: 6px;
+      margin-bottom: 13px;
+      font-size: 0.98rem;
+      color: #555;
+      min-height: 72px;
+    }
+    .button-bar { display: flex; gap: 14px; margin-top: 6px; margin-bottom: 10px; }
+    button { background: #2e86de; color: #fff; border: none; border-radius: 7px; padding: 9px 24px; font-size: 1rem; cursor: pointer; transition: background 0.3s; }
+    button:hover:not(:disabled) { background: #0b7dda; }
+    button:disabled { background: #b2bec3; cursor: not-allowed; }
+    #ai-status { font-size: 1rem; color: #2e86de; text-align: left; margin-bottom: 9px; min-height: 20px;}
+    .final-output { background: #f1f8f5; border-radius: 8px; padding: 18px; margin-top: 22px; font-size: 1.07rem;}
+    .api-key-label { color: #a93226; margin-top: 6px;}
+    .writing-stats { 
+      background: #f8f9fa; 
+      border-radius: 6px; 
+      padding: 8px 12px; 
+      margin-bottom: 10px; 
+      font-size: 0.9rem; 
+      color: #666; 
+      display: flex; 
+      justify-content: space-between; 
+    }
+    .context-panel {
+      background: #f0f4f8;
+      border-radius: 6px;
+      padding: 10px;
+      margin-bottom: 10px;
+      font-size: 0.85rem;
+      color: #555;
+      border-left: 3px solid #3498db;
+    }
+    .continuation-mode {
+      display: flex;
+      gap: 10px;
+      margin-bottom: 10px;
+      align-items: center;
+    }
+    .continuation-mode label {
+      margin: 0;
+      font-size: 0.9rem;
+    }
+    .continuation-mode select {
+      width: auto;
+      margin: 0;
+    }
+    @media (max-width:800px){ .container{padding:12px 3vw;} }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>Enhanced Collaborative Writing with AI (<span style="color:#2471a3;">GPT-4o-mini</span>)</h1>
+    <label for="api-key-input" class="api-key-label">OpenAI API Key <span style="font-weight:400;color:#666;">(never shared, stored only in this session)</span>:</label>
+    <input id="api-key-input" type="password" placeholder="sk-...">
+    
+    <label for="subject-input">Subject or Topic:</label>
+    <input id="subject-input" type="text" placeholder="e.g., The importance of teamwork">
+
+    <label for="role-select">Select the Agent's Writing Role/Style:</label>
+    <select id="role-select">
+      <option value="literature">Literature Author</option>
+      <option value="researcher">Academic Researcher</option>
+      <option value="journalist">Journalist</option>
+      <option value="consultant">Consultant / Advisor</option>
+      <option value="storyteller">Storyteller (Children's)</option>
+      <option value="creative">Creative Writer</option>
+      <option value="technical">Technical Writer</option>
+    </select>
+    <div id="role-desc" class="role-desc"></div>
+
+    <button id="start-btn">Start Writing</button>
+
+    <div id="editor-section" style="display:none;">
+      <div class="writing-stats">
+        <span id="word-count">Words: 0</span>
+        <span id="char-count">Characters: 0</span>
+        <span id="contribution-count">AI Contributions: 0</span>
+      </div>
+      
+      <div class="continuation-mode">
+        <label for="continuation-style">AI Continuation Style:</label>
+        <select id="continuation-style">
+          <option value="smooth">Smooth Flow</option>
+          <option value="expand">Expand Ideas</option>
+          <option value="contrast">Add Contrast</option>
+          <option value="conclude">Move Toward Conclusion</option>
+        </select>
+      </div>
+      
+      <div class="continuation-mode">
+        <label for="sentence-count">AI Sentences to Add:</label>
+        <select id="sentence-count">
+          <option value="1">1 sentence</option>
+          <option value="2" selected>2 sentences</option>
+          <option value="3">3 sentences</option>
+          <option value="4">4 sentences</option>
+          <option value="5">5 sentences</option>
+        </select>
+      </div>
+      
+      <div id="context-panel" class="context-panel" style="display:none;">
+        <strong>Current Context:</strong> <span id="context-summary"></span>
+      </div>
+      
+      <label for="writing-area">Your Collaborative Writing</label>
+      <div id="writing-area" contenteditable="true" spellcheck="true"></div>
+      <div id="ai-status"></div>
+      <div class="button-bar">
+        <button id="ai-continue-btn">AI Continue</button>
+        <button id="ai-rephrase-btn" style="background:#8e44ad;">Rephrase Last</button>
+        <button id="finish-btn" style="background:#27ae60;">Finish</button>
+      </div>
+    </div>
+
+    <div id="final-output" class="final-output" style="display:none;"></div>
+  </div>
+
+  <script>
+    // Enhanced agent roles with better context awareness
+    const agentRoles = {
+      literature: {
+        name: "Literature Author",
+        description: `• Rich imagery, metaphors, and emotional depth<br>
+        • Character development and atmospheric setting<br>
+        • Poetic language with symbolic meaning<br>
+        • Builds narrative tension and mood progressively`,
+        system: `You are a masterful literary author. Write with rich, evocative language that creates vivid imagery and emotional resonance. Use metaphors, symbolism, and sensory details. Develop characters and atmosphere. Each contribution should deepen the narrative and maintain literary quality while flowing naturally from the existing text.`
+      },
+      researcher: {
+        name: "Academic Researcher",
+        description: `• Evidence-based and analytically rigorous<br>
+        • Structured arguments with logical progression<br>
+        • Technical precision and scholarly tone<br>
+        • Builds comprehensive understanding systematically`,
+        system: `You are a distinguished academic researcher. Write with precision, analytical depth, and scholarly rigor. Support points with evidence, maintain logical structure, and use appropriate technical language. Each contribution should advance the argument or analysis while building on previous points systematically.`
+      },
+      journalist: {
+        name: "Journalist",
+        description: `• Clear, factual, and compelling narrative<br>
+        • Investigative depth with human interest<br>
+        • Balanced perspective with key details<br>
+        • Engages readers while informing thoroughly`,
+        system: `You are an experienced journalist. Write with clarity, accuracy, and engaging narrative flow. Focus on key facts, human interest, and balanced reporting. Each contribution should advance the story, reveal new information, or provide deeper context while maintaining journalistic integrity.`
+      },
+      consultant: {
+        name: "Consultant / Advisor",
+        description: `• Strategic insights with actionable recommendations<br>
+        • Problem-solving framework and solutions<br>
+        • Professional tone with clear next steps<br>
+        • Builds comprehensive strategic understanding`,
+        system: `You are a senior strategic consultant. Write with authority, providing actionable insights and recommendations. Use frameworks, strategic thinking, and solution-oriented language. Each contribution should build the case, provide analysis, or offer concrete next steps that advance the overall strategic narrative.`
+      },
+      storyteller: {
+        name: "Storyteller (Children's)",
+        description: `• Engaging, age-appropriate language with wonder<br>
+        • Clear moral lessons through entertaining narrative<br>
+        • Rhythmic, memorable phrases and repetition<br>
+        • Builds excitement and learning progressively`,
+        system: `You are a beloved children's storyteller. Write with warmth, wonder, and age-appropriate language. Use gentle repetition, clear moral lessons, and engaging narrative elements. Each contribution should advance the story, develop characters, or reinforce the central message while maintaining child-friendly appeal.`
+      },
+      creative: {
+        name: "Creative Writer",
+        description: `• Innovative narrative techniques and perspectives<br>
+        • Experimental language and unique voice<br>
+        • Unexpected connections and creative insights<br>
+        • Pushes boundaries while maintaining coherence`,
+        system: `You are an innovative creative writer. Experiment with language, perspective, and narrative techniques. Bring fresh insights and unexpected connections. Each contribution should surprise while maintaining coherence, advancing the creative vision, and building on established themes in novel ways.`
+      },
+      technical: {
+        name: "Technical Writer",
+        description: `• Clear, precise explanations of complex concepts<br>
+        • Step-by-step logical progression<br>
+        • Practical examples and applications<br>
+        • Builds comprehensive technical understanding`,
+        system: `You are an expert technical writer. Explain complex concepts with clarity and precision. Use logical progression, practical examples, and clear structure. Each contribution should build technical understanding, provide concrete details, or advance the explanation while remaining accessible and well-organized.`
+      }
+    };
+
+    // Enhanced continuation styles
+    const continuationStyles = {
+      smooth: "Continue the narrative flow naturally, maintaining the same tone and building on the immediate context.",
+      expand: "Elaborate on the ideas presented, adding depth, examples, or additional perspectives to enrich the content.",
+      contrast: "Introduce a contrasting viewpoint, alternative perspective, or counterpoint to create intellectual tension.",
+      conclude: "Guide the writing toward a natural conclusion, summarizing key points or bringing the narrative to closure."
+    };
+
+    // Global variables
+    let writingContext = {
+      subject: "",
+      overallTheme: "",
+      keyPoints: [],
+      lastUserContribution: "",
+      narrativeDirection: "",
+      toneConsistency: "",
+      aiContributions: 0,
+      totalWords: 0
+    };
+
+    // Elements
+    const apiKeyInput = document.getElementById('api-key-input');
+    const subjectInput = document.getElementById('subject-input');
+    const roleSelect = document.getElementById('role-select');
+    const roleDesc = document.getElementById('role-desc');
+    const startBtn = document.getElementById('start-btn');
+    const editorSection = document.getElementById('editor-section');
+    const writingArea = document.getElementById('writing-area');
+    const aiContinueBtn = document.getElementById('ai-continue-btn');
+    const aiRephraseBtn = document.getElementById('ai-rephrase-btn');
+    const aiStatus = document.getElementById('ai-status');
+    const finishBtn = document.getElementById('finish-btn');
+    const finalOutput = document.getElementById('final-output');
+    const continuationStyle = document.getElementById('continuation-style');
+    const sentenceCount = document.getElementById('sentence-count');
+    const contextPanel = document.getElementById('context-panel');
+    const contextSummary = document.getElementById('context-summary');
+    const wordCount = document.getElementById('word-count');
+    const charCount = document.getElementById('char-count');
+    const contributionCount = document.getElementById('contribution-count');
+
+    // Display role description
+    function updateRoleDesc() {
+      const role = roleSelect.value;
+      roleDesc.innerHTML = `<b>${agentRoles[role].name}:</b><br>${agentRoles[role].description}`;
+    }
+    updateRoleDesc();
+    roleSelect.onchange = updateRoleDesc;
+
+    // Update writing statistics
+    function updateStats() {
+      const text = writingArea.textContent || "";
+      const words = text.trim() ? text.trim().split(/\s+/).length : 0;
+      const chars = text.length;
+      
+      wordCount.textContent = `Words: ${words}`;
+      charCount.textContent = `Characters: ${chars}`;
+      contributionCount.textContent = `AI Contributions: ${writingContext.aiContributions}`;
+      writingContext.totalWords = words;
+    }
+
+    // Analyze and update context
+    function analyzeContext() {
+      const fullText = writingArea.textContent || "";
+      const sentences = fullText.split(/[.!?]+/).filter(s => s.trim().length > 0);
+      
+      if (sentences.length > 0) {
+        const lastSentences = sentences.slice(-3).join('. ');
+        contextSummary.textContent = lastSentences.substring(0, 100) + (lastSentences.length > 100 ? '...' : '');
+        contextPanel.style.display = 'block';
+      }
+    }
+
+    // Enhanced AI call with better context management
+    async function callOpenAI(apiKey, agentSystemPrompt, context, isRephrase = false) {
+      const fullText = writingArea.textContent || "";
+      const {allText, lastUserText, textSegments} = getEnhancedContext(writingArea);
+      
+      // Build comprehensive context
+      const contextPrompt = `
+        WRITING CONTEXT:
+        - Subject: "${writingContext.subject}"
+        - Current word count: ${writingContext.totalWords}
+        - AI contributions so far: ${writingContext.aiContributions}
+        - Continuation style requested: ${continuationStyles[continuationStyle.value]}
+        - Last user contribution: "${lastUserText}"
+        
+        FULL TEXT SO FAR:
+        """${allText}"""
+        
+        INSTRUCTIONS:
+        ${isRephrase ? 
+          'Rephrase the last AI contribution to be more engaging and better integrated with the user\'s writing. Keep the same general meaning but improve flow and style.' :
+          `Write exactly ${sentenceCount.value} sentence${sentenceCount.value > 1 ? 's' : ''} that continue this collaborative piece naturally. ${continuationStyles[continuationStyle.value]} 
+          
+          CRITICAL REQUIREMENTS:
+          - Write EXACTLY ${sentenceCount.value} sentence${sentenceCount.value > 1 ? 's' : ''} - no more, no less
+          - Do NOT repeat or echo the user's last contribution
+          - Maintain consistent tone and style throughout
+          - Build on existing themes and narrative direction
+          - Each sentence should advance the content meaningfully
+          - Ensure smooth transitions from previous text
+          - Respond ONLY with the continuation text, no explanations`
+        }`;
+
+      const messages = [
+        { role: "system", content: agentSystemPrompt },
+        { role: "user", content: contextPrompt }
+      ];
+
+      const body = {
+        model: "gpt-4o-mini",
+        messages,
+        max_tokens: isRephrase ? 100 : Math.min(200, parseInt(sentenceCount.value) * 40),
+        temperature: 0.7,
+        presence_penalty: 0.6,
+        frequency_penalty: 0.3
+      };
+
+      const response = await fetch("https://api.openai.com/v1/chat/completions", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": "Bearer " + apiKey
+        },
+        body: JSON.stringify(body)
+      });
+
+      if (!response.ok) {
+        let msg = "Unknown error";
+        try { msg = (await response.json()).error?.message || msg; } catch { }
+        throw new Error(msg);
+      }
+      
+      const data = await response.json();
+      const aiText = data.choices[0].message.content.trim();
+      
+      // Update context tracking
+      if (!isRephrase) {
+        writingContext.aiContributions++;
+        writingContext.lastUserContribution = lastUserText;
+      }
+      
+      return aiText;
+    }
+
+    // Enhanced context extraction
+    function getEnhancedContext(container) {
+      let allText = '';
+      let lastUserText = '';
+      let textSegments = [];
+      let currentSegment = { type: 'user', text: '' };
+      
+      const processNode = (node) => {
+        if (node.nodeType === 3) { // Text node
+          const text = node.textContent;
+          if (text.trim()) {
+            allText += text;
+            currentSegment.text += text;
+            if (currentSegment.type === 'user') {
+              lastUserText = text.trim();
+            }
+          }
+        } else if (node.nodeType === 1) { // Element node
+          if (node.classList.contains('ai-text')) {
+            if (currentSegment.text.trim()) {
+              textSegments.push({...currentSegment});
+            }
+            currentSegment = { type: 'ai', text: node.textContent };
+            allText += node.textContent;
+            textSegments.push({...currentSegment});
+            currentSegment = { type: 'user', text: '' };
+          } else if (node.classList.contains('user-text')) {
+            allText += node.textContent;
+            currentSegment.text += node.textContent;
+            lastUserText = node.textContent.trim();
+          } else if (node.tagName === 'BR') {
+            allText += '\n';
+            currentSegment.text += '\n';
+          } else {
+            for (let child of node.childNodes) {
+              processNode(child);
+            }
+          }
+        }
+      };
+      
+      for (let node of container.childNodes) {
+        processNode(node);
+      }
+      
+      if (currentSegment.text.trim()) {
+        textSegments.push(currentSegment);
+      }
+      
+      return { allText: allText.trim(), lastUserText: lastUserText.trim(), textSegments };
+    }
+
+    // Start writing functionality
+    startBtn.onclick = async () => {
+      const apiKey = apiKeyInput.value.trim();
+      if (!apiKey.startsWith('sk-') || apiKey.length < 30) {
+        apiKeyInput.value = "";
+        apiKeyInput.focus();
+        apiKeyInput.placeholder = "Please enter a valid OpenAI API key!";
+        return;
+      }
+      
+      const subject = subjectInput.value.trim();
+      if (!subject) {
+        subjectInput.focus();
+        subjectInput.placeholder = "Please enter a subject!";
+        return;
+      }
+      
+      // Initialize context
+      writingContext.subject = subject;
+      writingContext.aiContributions = 0;
+      writingContext.totalWords = 0;
+      
+      // Disable inputs
+      apiKeyInput.disabled = true;
+      subjectInput.disabled = true;
+      roleSelect.disabled = true;
+      startBtn.disabled = true;
+      
+      // Show editor
+      editorSection.style.display = '';
+      aiStatus.textContent = "AI is crafting the opening...";
+      aiContinueBtn.disabled = true;
+      aiRephraseBtn.disabled = true;
+      writingArea.innerHTML = "";
+      
+      try {
+        const agentSystemPrompt = agentRoles[roleSelect.value].system;
+        const aiText = await callOpenAI(apiKey, agentSystemPrompt, { subject, isOpening: true });
+        
+        writingArea.innerHTML = `<span class="ai-text">${escapeHTML(aiText)}</span>`;
+        placeCaretAtEnd(writingArea);
+        
+        aiStatus.textContent = "Great start! Add your thoughts and click 'AI Continue' when ready.";
+        aiContinueBtn.disabled = false;
+        writingArea.focus();
+        
+        updateStats();
+        analyzeContext();
+        
+      } catch (e) {
+        aiStatus.textContent = "Error: " + e.message;
+        apiKeyInput.disabled = false;
+        startBtn.disabled = false;
+        roleSelect.disabled = false;
+      }
+    };
+
+    // AI Continue functionality
+    aiContinueBtn.onclick = async () => {
+      aiStatus.textContent = "AI is continuing the narrative...";
+      aiContinueBtn.disabled = true;
+      aiRephraseBtn.disabled = true;
+      writingArea.contentEditable = "false";
+      
+      // Highlight user contributions
+      writingArea.innerHTML = buildHTMLWithUserHighlight(writingArea);
+      
+      try {
+        const apiKey = apiKeyInput.value.trim();
+        const agentSystemPrompt = agentRoles[roleSelect.value].system;
+        const aiText = await callOpenAI(apiKey, agentSystemPrompt, writingContext);
+        
+        insertAIText(aiText);
+        
+        aiStatus.textContent = "Your turn! Edit, add more, or click 'AI Continue' for the next contribution.";
+        writingArea.contentEditable = "true";
+        aiContinueBtn.disabled = false;
+        aiRephraseBtn.disabled = false;
+        
+        placeCaretAtEnd(writingArea);
+        writingArea.focus();
+        
+        updateStats();
+        analyzeContext();
+        
+      } catch (e) {
+        aiStatus.textContent = "Error: " + e.message;
+        writingArea.contentEditable = "true";
+        aiContinueBtn.disabled = false;
+        aiRephraseBtn.disabled = false;
+      }
+    };
+
+    // AI Rephrase functionality
+    aiRephraseBtn.onclick = async () => {
+      const aiSpans = writingArea.querySelectorAll('.ai-text');
+      if (aiSpans.length === 0) {
+        aiStatus.textContent = "No AI contributions to rephrase yet.";
+        return;
+      }
+      
+      aiStatus.textContent = "AI is rephrasing the last contribution...";
+      aiContinueBtn.disabled = true;
+      aiRephraseBtn.disabled = true;
+      
+      try {
+        const apiKey = apiKeyInput.value.trim();
+        const agentSystemPrompt = agentRoles[roleSelect.value].system;
+        const newText = await callOpenAI(apiKey, agentSystemPrompt, writingContext, true);
+        
+        // Replace last AI contribution
+        const lastAISpan = aiSpans[aiSpans.length - 1];
+        lastAISpan.textContent = newText;
+        
+        aiStatus.textContent = "Rephrased! Continue editing or add more content.";
+        aiContinueBtn.disabled = false;
+        aiRephraseBtn.disabled = false;
+        
+        updateStats();
+        analyzeContext();
+        
+      } catch (e) {
+        aiStatus.textContent = "Error: " + e.message;
+        aiContinueBtn.disabled = false;
+        aiRephraseBtn.disabled = false;
+      }
+    };
+
+    // Finish writing
+    finishBtn.onclick = () => {
+      editorSection.style.display = "none";
+      finalOutput.style.display = "";
+      finalOutput.innerHTML = `
+        <h2>Final Collaborative Writing</h2>
+        <div style="margin-bottom: 15px; font-size: 0.9rem; color: #666;">
+          <strong>Statistics:</strong> ${writingContext.totalWords} words, ${writingContext.aiContributions} AI contributions
+        </div>
+        <hr>
+        <div style="white-space: pre-line; line-height: 1.6;">${writingArea.innerHTML}</div>
+        <hr><br>
+        <a href="javascript:window.location.reload()" style="color:#2980b9; text-decoration: none;">Start New Writing Session</a>
+      `;
+    };
+
+    // Enhanced helper functions
+    function escapeHTML(str) {
+      return str.replace(/[&<>"']/g, function (m) {
+        return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[m];
+      });
+    }
+
+    function buildHTMLWithUserHighlight(container) {
+      let html = '';
+      for (let node of container.childNodes) {
+        if (node.nodeType === 1 && node.classList.contains('ai-text')) {
+          html += node.outerHTML;
+        } else if (node.nodeType === 3) {
+          let txt = node.textContent;
+          if (txt.trim()) {
+            html += `<span class="user-text">${escapeHTML(txt)}</span>`;
+          } else {
+            html += escapeHTML(txt);
+          }
+        } else if (node.nodeType === 1 && node.tagName === "BR") {
+          html += '<br>';
+        } else if (node.nodeType === 1 && !node.classList.contains('ai-text') && !node.classList.contains('user-text')) {
+          // Handle other elements
+          let innerText = node.textContent;
+          if (innerText.trim()) {
+            html += `<span class="user-text">${escapeHTML(innerText)}</span>`;
+          }
+        } else if (node.nodeType === 1) {
+          html += node.outerHTML;
+        }
+      }
+      return html;
+    }
+
+    function insertAIText(aiText) {
+      let html = writingArea.innerHTML.replace(/\s*$/, "");
+      let toInsert = `<span class="ai-text">${escapeHTML(aiText)}</span>`;
+      
+      // Smart spacing logic
+      const currentText = writingArea.textContent || "";
+      if (currentText && !currentText.match(/[.!?]\s*$/)) {
+        if (aiText.match(/^[A-Z]/)) {
+          toInsert = ". " + toInsert;
+        } else {
+          toInsert = " " + toInsert;
+        }
+      } else if (currentText) {
+        toInsert = " " + toInsert;
+      }
+      
+      writingArea.innerHTML = html + toInsert;
+    }
+
+    function placeCaretAtEnd(el) {
+      el.focus();
+      if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
+        let range = document.createRange();
+        range.selectNodeContents(el);
+        range.collapse(false);
+        let sel = window.getSelection();
+        sel.removeAllRanges();
+        sel.addRange(range);
+      }
+    }
+
+    // Enhanced input handling
+    writingArea.addEventListener('input', function() {
+      writingArea.innerHTML = buildHTMLWithUserHighlight(writingArea);
+      placeCaretAtEnd(writingArea);
+      updateStats();
+      analyzeContext();
+    });
+
+    // Auto-save functionality (in memory)
+    let autoSaveData = {};
+    setInterval(() => {
+      if (writingArea.innerHTML) {
+        autoSaveData = {
+          content: writingArea.innerHTML,
+          subject: writingContext.subject,
+          role: roleSelect.value,
+          stats: {
+            words: writingContext.totalWords,
+            contributions: writingContext.aiContributions
+          }
+        };
+      }
+    }, 30000); // Auto-save every 30 seconds
+  </script>
+</body>
+</html>

📘 Enhanced Collaborative guide.txt

@@ -0,0 +1,181 @@
+📘 Enhanced Collaborative Writing with AI: Teacher & Student Guide
+1. Introduction
+Enhanced Collaborative Writing with AI is a next-generation writing tool that empowers students, teachers, and creative professionals to co-author texts with real-time AI assistance. Leveraging GPT-4o-mini, the tool supports a range of writing purposes (literary, academic, journalistic, technical, storytelling, and more) and offers tailored support to nurture writing fluency, critical thinking, and collaborative skills—all in a privacy-first, browser-based environment.
+
+2. Getting Started
+A. System & Privacy Requirements
+No installation, signup, or login required.
+
+Works in any modern browser (Chrome, Edge, Safari, Firefox, etc.).
+
+All content, including your OpenAI API key, stays local to your device and is never sent to a third party except OpenAI (for AI completions).
+
+B. Initial Setup
+Open the Application:
+Navigate to the provided web page or run the HTML file locally.
+
+Enter OpenAI API Key:
+
+Required for AI-powered writing and feedback.
+
+Your key is never shared or stored outside your session.
+
+Enter Your Subject or Topic:
+
+Define the writing focus (e.g., “The Importance of Teamwork,” “Climate Change in Urban Areas,” or “Creative Short Story”).
+
+Select the Writing Role/Style:
+
+Choose from Literature Author, Academic Researcher, Journalist, Consultant, Storyteller (Children’s), Creative Writer, or Technical Writer.
+
+The tool displays a description of the selected style for guidance.
+
+3. Collaborative Writing Workflow
+A. Starting a Session
+Click Start Writing to begin.
+
+The AI generates an opening passage in your chosen style and subject.
+
+B. Interactive Writing Area
+The editor will now be active, showing:
+
+Writing statistics: word count, character count, and number of AI contributions.
+
+Continuation controls:
+
+AI Continuation Style: Choose how the AI will add to your text (Smooth Flow, Expand Ideas, Add Contrast, Move Toward Conclusion).
+
+AI Sentences to Add: Choose 1–5 sentences per AI contribution.
+
+C. Writing, Collaboration, and Revision
+Write and Edit:
+
+Add your own text anywhere in the document.
+
+All user-written text is visually highlighted for clarity.
+
+Request AI Collaboration:
+
+Click AI Continue to have the AI add sentences according to your chosen style and amount.
+
+AI contributions appear in a different highlight color for transparency.
+
+Rephrase AI Content:
+
+If the AI’s last addition isn’t ideal, click Rephrase Last to ask for a fresh alternative.
+
+Monitor Context Panel:
+
+The tool summarizes the current context to ensure narrative coherence, especially in longer works.
+
+Track Progress:
+
+Writing statistics update in real time to help with goal-setting and self-regulation.
+
+D. Completion & Output
+When finished, click Finish:
+
+A summary window appears, showing the final text, word count, and AI contributions.
+
+Option to copy, save, or start a new session.
+
+4. Classroom Integration & Teacher Use
+A. Pedagogical Applications
+Collaborative Essays & Reports:
+
+Pairs/groups can co-write with AI to generate drafts, arguments, and revisions.
+
+Writing Workshops:
+
+Use different roles/styles to illustrate genre differences and voice.
+
+Feedback & Revision:
+
+Students analyze, critique, and rephrase both AI and peer-generated content.
+
+Personalized Support:
+
+The tool provides scaffolding for struggling writers and challenges for advanced students.
+
+Creative Writing & Storytelling:
+
+Experiment with narrative, style, and collaborative storytelling.
+
+B. Assessment & Differentiation
+Formative Assessment:
+
+Track progress via statistics, drafts, and contributions.
+
+Portfolio Evidence:
+
+Finished pieces and process logs can be used for portfolios and progress tracking.
+
+Differentiated Instruction:
+
+Assign roles or styles based on student needs/interests.
+
+C. Practical Classroom Tips
+Group Dynamics:
+
+Assign collaborative groups different sections or styles to merge later.
+
+Reflection Activities:
+
+Have students reflect on the AI’s choices, their own revisions, and the collaborative process.
+
+Skill Building:
+
+Focus on genre, voice, tone, structure, and argument development in context.
+
+5. Student Guidance: Making the Most of the Tool
+A. Personal Writing Growth
+Experiment with Roles:
+
+Try different writing styles/roles to build flexibility and creativity.
+
+Learn from AI:
+
+Study the AI’s contributions—what makes them effective? Where can you improve or diverge?
+
+Iterate & Revise:
+
+Use the rephrase feature and edit freely; writing is a process.
+
+Set Goals:
+
+Use the statistics to challenge yourself (e.g., word count targets, number of revisions).
+
+B. Ethical & Critical Use
+AI as a Co-Writer, Not a Replacement:
+
+Balance AI help with your own voice and ideas.
+
+Critical Thinking:
+
+Evaluate AI-generated text—does it make sense? Is it relevant, factual, and original?
+
+Academic Integrity:
+
+Always cite sources for factual or research-based work.
+
+6. Best Practices & Advanced Tips
+Draft Multiple Versions:
+
+Use the tool to create different drafts and compare outcomes.
+
+Peer Review:
+
+Share your output with classmates or teachers for further feedback.
+
+Advanced Styles:
+
+Adjust the AI continuation style (Expand Ideas, Add Contrast, etc.) for richer, more complex writing.
+
+Collaborative Projects:
+
+Use in group assignments where students and AI alternate contributions for a true “collaborative authorship” experience.
+
+7. Support, Troubleshooting, and Contact
+API Key Security:
+
+Never share your OpenAI key. It is stored only for your session and is required for AI-powered writing.