Update Playground to go to Hugging Face Spaces (#35)

Signed-off-by: GitHub <noreply@github.com>

Author: sscargal

themes/memmachine/layouts/playground.html

@@ -33,30 +33,24 @@ <h2 class="title-2">How to Use the <span>MemMachine Playground</span></h2>
               <p>Click the "Go to Playground" button.</p>
               <div class="hero-btn mt-12">
                 <div>
-                  <a href="https://playground.memmachine.ai/" class="btn btn-primary mx-2" style="background-color: #5d5dd4;" target="_blank">Go to Playground</a>
+                  <a href="https://huggingface.co/spaces/Memverge/MemMachine-Playground" class="btn btn-primary mx-2" style="background-color: #5d5dd4;" target="_blank">Go to Playground</a>
                 </div>
               </div>
             </li>
             <li class="mb-5">
-              <p>On the login page, click "Continue with Google" to create a secure account and log in. The email and password feature is not enabled.</p>
-            <img src="/img/playground_signin_with_OAuth.png" alt="Continue with Google button" style="width: 100%; max-width: 400px; margin-top: 10px; border-radius: 8px;" loading="lazy">
+              <p>On the left, enter your Hugging Face API Token/Key to login</p>
+            <img src="/img/HuggingFacePlaygroundAuth.png" alt="Hugging Face Authentication Token" style="width: 100%; max-width: 400px; margin-top: 10px; border-radius: 8px;" loading="lazy">
             </li>
             <li class="mb-5">
-              <p>In the model selection dropdown at the top of the page, click the '+' to add both of these models to create a side-by-side comparison:</p>
-              <ul class="list-disc ml-6 mt-2">
-                <li><span class="highlight-text-gradient">gpt-4.1-mini:</span> This model has no memory and will not remember information in a new chat session.</li>
-                <li><span class="highlight-text-gradient">gpt-4.1-mini-memory:</span> This model uses the power of MemMachine to remember facts and information within and across chat sessions.</li>
-              </ul>
-                <img src="/img/playground_select_models.png" alt="Model selection dropdown with two models" style="width: 100%; max-width: 500px; margin-top: 10px; border-radius: 8px;" loading="lazy">
+              <p>Select a model from the dropdown</p>
             </li>
             <li class="mb-5">
-              <p>Once both models are added, you can start chatting. You can compare the response from both models simultaneously.</p>
-                <img src="/img/playground_side-by-side-chat-session.png" alt="Side-by-side chat session for A/B testing" style="width: 100%; max-width: 500px; margin-top: 10px; border-radius: 8px;" loading="lazy">
+              <p>Select "Compare with MemMachine"</p>
             </li>
             <li class="mb-5">
-              <p>Start a new chat session by clicking the "New Chat" button on the left sidebar. Continue chatting. You will notice the <span class="highlight-text-gradient">gpt-4.1-mini</span> forgets everything from the previous session(s), whereas the <span class="highlight-text-gradient">gpt-4.1-mini-memory</span> retains context and information from all prior sessions.</p>
+              <p>Continue chatting and start new sessions. You will notice the <span class="highlight-text-gradient">Control</span> model forgets everything from the previous session(s), whereas the <span class="highlight-text-gradient">MemMachine</span> model retains context and information from all prior sessions.</p>
+            </li>
           </ol>
-
         </div>
       </div>
     </div>