PotatoOff
/

HamSter-0.2

@@ -1,3 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -6,120 +11,138 @@
     <title>HamSter v0.2</title>
     <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600&display=swap" rel="stylesheet">
     <style>
-        @keyframes typing {
-            from { width: 0; }
-            to { width: 100%; }
-        }
-        @keyframes fadeIn {
-            0% { opacity: 0; }
-            100% { opacity: 1; }
-        }
         body {
             font-family: 'Quicksand', sans-serif;
             background-color: #1A202C;
             color: #F7FAFC;
             margin: 0;
             padding: 20px;
-            font-size: 15px; /* Adjusted font size */
         }
         .container {
-            max-width: 100%; /* Use more width */
             margin: auto;
             background-color: #2D3748;
             padding: 20px;
             border-radius: 10px;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-            transition: transform 0.3s ease; /* Animation */
         }
-        .container:hover {
-            transform: translateY(-5px); /* Animation */
-        }
-        .header img:first-child {
-            animation: fadeIn 2s ease-out; /* Animation for the first image */
-            max-width: 100%; /* Ensure image is responsive */
         }
         .header h1 {
-            overflow: hidden; /* Ensures the typing effect is visible */
-            border-right: .15em solid orange; /* The cursor */
-            white-space: nowrap; /* Keeps the text in a single line */
-            margin: 0 auto; /* Centers the header */
-            letter-spacing: .15em; /* Adjust letter spacing */
-            animation:
-              typing 3.5s steps(40, end),
-              blink-caret .75s step-end infinite;
         }
-        /* Typing effect */
-        @keyframes typing {
-            from { width: 0; }
-            to { width: 100%; }
         }
-        /* Cursor animations */
-        @keyframes blink-caret {
-            from, to { border-color: transparent; }
-            50% { border-color: orange; }
         }
         .button {
             display: inline-block;
-            background-image: linear-gradient(145deg, #6B7280 0%, #4A5568 100%);
-            color: #FFFFFF;
-            padding: 12px 24px; /* Increased padding for bigger buttons */
             border: none;
-            border-radius: 5px;
             cursor: pointer;
             text-decoration: none;
-            margin-right: 10px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Added shadow */
-            transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Animation */
         }
         .button:hover {
-            background-color: #4A5568; /* Animation */
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Enhanced shadow on hover */
-        }
-        .info {
-            font-size: 15px; /* Adjusted font size */
-            line-height: 1.6; /* Adjusted for better readability */
-        }
-        .info strong {
-            font-weight: 600;
-        }
-        .info a {
-            color: #63B3ED;
-            text-decoration: none;
-        }
-        .info a:hover {
-            text-decoration: underline;
-        }
-        .title {
-            color: #CBD5E0;
-            margin-top: 20px;
         }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="header">
             <img src="https://cdn-uploads.huggingface.co/production/uploads/64e7616c7df33432812e3c57/PieKyxOEVyn0zrrNqVec_.webp" alt="Image">
-            <div>
-                <h1>HamSter-0.2</h1> <!-- Smooth typing animation applied -->
-                <p class="title">Licensed under Apache-2.0</p> <!-- Title with Apache-2.0 text -->
-                <p class="info">
-                    - For optimal performance, we recommend using a detailed character card! Check out <a href="https://chub.ai" target="_blank">Chub.ai</a> (Please note there might be NSFW content on the homepage) for some beautifully designed character cards.<br>
-                    - Our chat assistant uses the Llama2 prompt template with chat instructions.<br>
-                    - It has been fine-tuned with a newer dataset for even better results.<br>
-                    - Stay tuned for more exciting updates! 😄
                 </p>
                 <div>
-                    <a href="#" class="button">Learn More</a>
-                    <a href="#" class="button" style="background-image: linear-gradient(145deg, #E53E3E 0%, #9B2C2C 100%);">Get Started</a>
                 </div>
             </div>
         </div>
-        <!-- Content continues -->
     </div>
 </body>
-</html>

+---
+license: apache-2.0
+language:
+- en
+---
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <title>HamSter v0.2</title>
     <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600&display=swap" rel="stylesheet">
     <style>
         body {
             font-family: 'Quicksand', sans-serif;
             background-color: #1A202C;
             color: #F7FAFC;
             margin: 0;
             padding: 20px;
+            font-size: 16px;
         }
         .container {
+            width: 100%;
             margin: auto;
             background-color: #2D3748;
             padding: 20px;
             border-radius: 10px;
+            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
         }
+        .header {
+            display: flex;
+            align-items: flex-start;
+            gap: 30px; /* Increased spacing */
+            flex-wrap: wrap; /* Ensure responsiveness */
         }
         .header h1 {
+            font-size: 24px;
+            color: #E2E8F0;
         }
+        .header img {
+            flex-shrink: 0; /* Prevent resizing */
+            max-width: 50%; /* Adjust based on preference */
+            border-radius: 15px;
+            max-height: 560px;
+            margin-left: 2%;
+            margin-right: 2%;
+            transition: filter 0.4s ease; /* Smooth transition for the filter */
         }
+        .header img:hover {
+            filter: blur(1px); /* Apply a stronger blur on hover */
+        }
+        .info {
+            background-color: #2D3748; /* Darker shade for elegant dark mode */
+            color: #CBD5E0; /* Lighter text color for contrast */
+            font-family: 'Fira Code', 'JetBrains Mono', monospace; /* Fira Code or JetBrains Mono font */
+            padding: 30px 20px; /* Increased top margin and padding for spaciousness */
+            border-radius: 10px; /* Rounded corners for a more elegant look */
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Darker box shadow with increased opacity */
+            font-size: 17px; /* Slightly larger font size for readability */
+            line-height: 1.7; /* Improved line height for readability */
+            max-width: 52%; /* Adjust based on preference */
+            overflow-x: auto;
+            margin-top: 40px; /* Added more margin on the top */
+            border: 2px solid #4A90E2; /* Border with a suitable color for a 3D effect */
+            transition: box-shadow 0.3s ease; /* Smooth transition for the box shadow */
+        }
+        .info:hover {
+            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6), 0 0 24px rgba(74, 144, 226, 0.6); /* Glowing box shadow on hover */
         }
         .button {
             display: inline-block;
+            background-image: linear-gradient(145deg, #F96167 0%, #F0F2D7 100%);
+            color: #F0F0F0;
+            padding: 16px 24px; /* Increased padding for bigger buttons */
             border: none;
+            border-radius: 10px;
             cursor: pointer;
             text-decoration: none;
+            margin-left: 60px;
+            transition: transform 0.3s ease, box-shadow 0.3s ease, background-image 0.3s ease; /* Updated transition */
+            /* Added for a more sophisticated look */
+            font-weight: bold; /* Make the text bold */
+            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
         }
         .button:hover {
+            background-image: linear-gradient(145deg, #FB1A3E 0%, #F38555 100%); /* Vibrant to light pink gradient */
+            transform: scale(1.07); /* Slightly increase size for emphasis */
+            box-shadow: 0 5px 25px rgba(249, 97, 103, 0.75); /* Adjusted glowing effect to match the button color */
         }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="header">
             <img src="https://cdn-uploads.huggingface.co/production/uploads/64e7616c7df33432812e3c57/PieKyxOEVyn0zrrNqVec_.webp" alt="Image">
+            <div class="info">
+                <h1>HamSter 0.2</h1>
+                <p>
+                    👋 Uncensored fine tune model roleplay focused of "mistralai/Mistral-7B-v0.2 with the help of my team <a href="https://huggingface.co/ConvexAI" target="_blank">ConvexAI</a><br><br>
+                    🚀 For optimal performance, I recommend using a detailed character card! (There is NSFW chub.ai) Check out <a href="https://chub.ai" target="_blank">Chub.ai</a> for some character cards.<br><br>
+                    🤩 Uses the Llama2 prompt template with chat instructions.<br><br>
+                    🔥 Fine-tuned with a newer dataset for even better results.<br><br>
+                    😄 Next one will be more interesting!
                 </p>
                 <div>
+                    <a href="https://huggingface.co/collections/PotatoOff/hamster-02-65abc987a92a64ef5bb13148" class="button">HamSter 0.2 Quants</a>
+                    <a href="https://discord.com/invite/9y7KxZxcZx" class="button">Discord Server</a>
                 </div>
             </div>
         </div>
+<!-- Additional content adjusted for consistency -->
+<div class="container">
+    <div style="overflow: hidden; position: relative;">
+        <img src="https://cdn-uploads.huggingface.co/production/uploads/64e7616c7df33432812e3c57/RnozajhXn85WQYuqcVtnA.webp" alt="Roleplay Test" style="width: auto; max-width: 37%; max-height: 100%; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); margin-left: 0%; display: block; float: right;">
+        <div class="info" style="overflow: hidden; padding-right: 10%;">
+            <h2 style="margin-top: 0;">I had good results with these parameters:</h2>
+            <ul style="margin-top: 0;">
+                <p>> temperature: 0.8</p>
+                <p>> top_p: 0.75</p>
+                <p>> min_p: 0</p>
+                <p>> top_k: 0</p>
+                <p>> repetition_penalty: 1.05</p>
+                <li>- - - - - - - - - - - - - - - - - - - - - ></li>
+            </ul>
+        </div>
+    </div>
+    <div style="overflow: hidden; position: relative;">
+        <img src="https://cdn-uploads.huggingface.co/production/uploads/64e7616c7df33432812e3c57/KaeVaaLOYZb0k81BbQ2-m.png" alt="OPEN LLM BENCHMARK" style="width: auto; max-width: 60%; max-height: 100%; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); margin-right: 3%; display: block; float: left;">
+        <div class="info" style="overflow: hidden; padding-right: 5%;">
+            <h2 style="margin-top: 0;">BenchMarks on OpenLLM Leaderboard</h2>
+            <p>More details: <a href="https://huggingface.co/datasets/open-llm-leaderboard/details_PotatoOff__HamSter-0.2" target="_blank">HamSter-0.2 OpenLLM BenchMarks</a></p>
+        </div>
     </div>
+    <div style="overflow: hidden; position: relative;">
+        <img src="https://cdn-uploads.huggingface.co/production/uploads/64e7616c7df33432812e3c57/NSUmxUmDyhO9tJb-NZd8m.png" alt="Ayumi's LLM Role Play & ERP Ranking" style="width: auto; max-width: 37%; max-height: 100%; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); margin-left: 0%; display: block; float: right;">
+        <div class="info" style="overflow: hidden; padding-right: 10%;">
+            <h2 style="margin-top: 0;">BenchMarks on Ayumi's LLM Role Play & ERP Ranking</h2>
+            <ul style="margin-top: 0;">
+                <li>< - - - - - - - - - - - - - - - - - - - - - -</li>
+            </ul>
+        </div>
+    </div>
+    <h2 style="color: #E2E8F0; margin-bottom: 20px;">Have Fun :)</h2>
+</div>
 </body>
+</html>