more improvements

README.md

@@ -1,13 +1,50 @@
 # LingoSynth 
-LingoSynth is a free AI rephrasing & facts checking tool.
+LingoSynth is a free tool for rephrasing & facts checking text. It is self-hostable.
 
-## Progress
+## Development Progress
-How much we are to the goal of fooling these services:
+### Languages
+- [x] English
+- [ ] German
+- [ ] ... (feel free to contribute!)
 
-| Detector   | Status |
+###  Text types
-| ---------- | ------ |
+- [x] Blog articles
-| gptzero.me | 50% |
+- [x] Book pages
-| zerogpt.com | 60% |
+- [ ] Homework & Essays
+
+This is the current development progress of LingoSynth (higher = better):
+
+| Website                                               | Blogs & Books | Homework & Essays |
+| ----------------------------------------------------- | ------------- | --------------------- |
+| [zerogpt.com](https://www.zerogpt.com/)               | 60%           | ?                     |
+| [gptzero.me](https://gptzero.me/)                     | 50%           | ?                     |
+| [writefull.com](https://x.writefull.com/gpt-detector) | ?             | ?                     |
+| [gptcheck.net](https://gptcheck.net/en)               | ?             | ?                     |
+| [gpt-detector.com](https://www.gpt-detector.com/)     | ?             | ?                     |
+
+## Contributing
+Re-writing text is a very time-consuming task. Therefore, we need your help!
+
+You can even support us without having much knowledge of programming.
+Adding new prompts to `lingosynth/app/prompts.py` is highly appreciated.
+Thank you for your support!
+
+The format works as follows:
+
+```py
+    ...
+    {
+        "role": "user",
+        "content": """Input text here.""",
+    },
+    {
+        "role": "assistant",
+        "content": """Rephrased text here.""",
+    }
+    ...
+```
+
+Make sure to check if the rephrased text is detected as plagiarism on the websites mentioned above.
 
 ## Star History
 [![Star History Chart](https://api.star-history.com/svg?repos=Luna-OSS/LingoSynth&type=Date)](https://star-history.com/#Luna-OSS/LingoSynth&Date)

lingosynth/app/ai.py

@@ -18,8 +18,8 @@ def generate(messages: str):
     return openai.ChatCompletion.create(
         model=MODEL,
         messages=messages,
-        temperature=0.9,
+        temperature=0.8,
-        frequency_penalty=0.2,
+        frequency_penalty=0.0,
-        presence_penalty=0.6,
+        presence_penalty=2,
 
     ).choices[0].message.content

lingosynth/app/api.py

@@ -1,4 +1,5 @@
 import flask
+import time
 
 from . import ai, prompts
 
@@ -14,8 +15,14 @@ def register(app: flask.Flask):
             'content': text
         })
 
+
+        try:
+            generated = ai.generate(messages)
+        except Exception:
+            return flask.Response('Sorry, an error has occurred!', status=500)
+
         return flask.jsonify(
             {
-                'text': ai.generate(messages)
+                'text': generated
             }
         )

lingosynth/app/prompts.py

@@ -68,5 +68,61 @@ You have to follow these rules:
 - 7. Take Action: Ultimately, taking action is the cornerstone of developing confidence and motivation. Set clear goals, develop a plan, and take small steps towards their achievement. Celebrate each little milestone you reach along the way and do not hesitate to seek assistance when needed.
 
 To sum up, building confidence and maintaining motivation is an ongoing process that requires consistent effort and practice. Believe in yourself! Remember to stay patient and persist in the face of obstacles. With enough dedication and focus, you can develop the confidence and motivation necessary for success.""",
-    }
+    },
+    {
+        "role": "user",
+        "content": """Title: Exploring the Top Ways to Earn Money Online
+
+Introduction:
+In today's digital age, the internet has opened up countless opportunities for individuals to earn money online. Whether you're looking for a side hustle or hoping to transition into a full-time online career, the possibilities are abundant. In this article, we will explore some of the best ways to earn money online and provide insights into how you can make the most of these opportunities.
+
+1. Freelancing:
+Freelancing has gained immense popularity as a flexible and lucrative option for earning money online. If you possess skills such as writing, graphic design, programming, or digital marketing, freelancing platforms like Upwork, Fiverr, and Freelancer offer a vast marketplace where you can showcase your talents. By creating a compelling profile, delivering high-quality work, and building a strong reputation, you can attract clients and earn a substantial income.
+
+2. Online Surveys and Microtasks:
+While they may not make you rich overnight, online surveys and microtasks can be a simple and accessible way to earn extra money. Websites like Swagbucks, Amazon Mechanical Turk, and Clickworker allow you to complete surveys, watch videos, participate in research studies, or perform small tasks in exchange for cash or gift cards. These platforms can be an excellent option for earning money during your free time.
+
+3. E-commerce and Dropshipping:
+The rise of e-commerce has revolutionized the way people do business. With platforms like Shopify and WooCommerce, setting up an online store has never been easier. You can sell products of your own creation, source them from wholesalers, or utilize dropshipping, where you partner with suppliers to fulfill orders. With effective marketing strategies and customer-centric approaches, you can create a successful e-commerce business and generate a steady stream of income.
+
+4. Online Tutoring and Course Creation:
+If you possess expertise in a particular subject, consider sharing your knowledge through online tutoring or course creation. Websites like VIPKid and Teachable provide platforms for teaching English, academic subjects, or specialized skills. Additionally, with the increasing demand for online learning, creating and selling your own courses on platforms like Udemy or Coursera can be a profitable venture.
+
+5. Affiliate Marketing:
+Affiliate marketing enables you to earn commissions by promoting other people's products or services. By joining affiliate programs such as Amazon Associates, ClickBank, or Commission Junction, you can generate income through referral links or banners on your website, blog, or social media channels. To succeed in affiliate marketing, focus on building an engaged audience and providing valuable content that drives conversions.
+
+Conclusion:
+The internet has revolutionized the way we work and opened up numerous avenues for earning money online. Whether you prefer freelancing, participating in online surveys, starting an e-commerce business, teaching others, or engaging in affiliate marketing, there are endless opportunities to explore. Success in the online world requires dedication, perseverance, and a willingness to learn and adapt. By leveraging your skills, interests, and the power of technology, you can embark on a rewarding online journey and achieve financial independence."""
+    },
+    {
+        "role": "assistant",
+        "content": """# Best Ways to Earn Money Online
+
+Nowadays, there are countless options for individuals to easily earn money online. It can be quite difficult to determine which ones are actually worth the effort, though. So let's discuss the best ways how you can earn money online!
+
+1. **Freelancing**
+
+    Freelancing has gained a lot of popularity, as it allows people to utilize their knowledge in a certain task. Especially writing, graphic design, programming, or digital marketing are common options for freelancing. Platforms like Fiverr or Upwork work like a digital marketplace for freelancing. By setting up a compelling profile, delivering high-quality work, and building a strong reputation, you can easily attract clients and possibly even earn a substantial income.
+
+2. **Surveys & Micro-tasks**
+
+    If you're just looking for an easy way to earn some spare cash, you might be interested in micro-tasks. Sites like Swagbucks and Clickworker offer many different types of micro-tasks. You will often be asked to complete surveys, studies or other small tasks in order to get paid. Of course, this won't make you an overnight billionaire, but it's still a great way to make a few bucks.
+
+3. **E-commerce & Dropshipping**
+
+    The growth of online shopping in recent years has been a revolution in the way people do business. Thanks to platforms like Shopify and WooCommerce, setting up an online store has never been easier. You can sell your own creations, buy from wholesalers or use drop shipping. Using effective marketing strategies and customer-focused approaches, you can build a successful ecommerce business and generate a steady stream of income.
+
+4. **Online Courses**
+
+    If you possess expertise in a particular subject, consider sharing your knowledge through online tutoring or course creation. Websites like VIPKid and Teachable provide platforms for teaching English, academic subjects, or specialized skills. Additionally, with the increasing demand for online learning, creating and selling your own courses on platforms like Udemy or Coursera can be a profitable venture.
+
+5. **Affiliate Marketing**
+
+    You can also earn money by promoting another person or company. You can earn money by placing referral links or banners on your website, blog, or social media channels through affiliate programs such as Amazon Associates, ClickBank, or Commission Junction. To succeed, focus on building an engaged audience and providing valuable content that drives conversions.
+
+## Conclusion
+
+The Internet has revolutionized the way we work and make money online. But it takes commitment, persistence and the ability to learn and adapt. Use your skills, interests, and technology to start your own rewarding online journey.
+"""
+    },
 ]

lingosynth/app/static/css/_vars.sass

@@ -8,6 +8,9 @@ $accent: #268678
 $accent-bg: #1c6e63
 $accent-dead: #54867e
 
+$alt: #2c589f
+$alt-light: #3866b0
+
 $teal: #2bafb9
 
 $text: #eaedf7

lingosynth/app/static/css/input.css

@@ -29,6 +29,22 @@ div.input-wrapper {
   padding: 2px 3px;
   border-radius: 0.5rem;
 }
+div.input-wrapper * {
+  border-color: #363a4f !important;
+}
+div.input-wrapper .CodeMirror {
+  background: #494d64;
+}
+div.input-wrapper .CodeMirror-wrap:first-child {
+  background: green !important;
+}
+div.input-wrapper *::selection {
+  background: #268678;
+  color: #eaedf7;
+}
+div.input-wrapper .CodeMirror-cursors {
+  filter: invert(1);
+}
 div.input-wrapper.loading {
   cursor: wait !important;
   position: relative;
@@ -46,14 +62,15 @@ div.input-wrapper.loading::before {
   left: 1rem;
   right: 1rem;
   bottom: 1rem;
-  background-image: conic-gradient(from 0deg, #268678, #eed49f, #268678);
+  background-image: conic-gradient(from 0deg, #2bafb9, #eed49f, #f5a97f);
   animation: rotate-gradient 1s linear infinite;
 }
 
 textarea {
   width: 100%;
-  height: 300px;
+  height: 400px;
-  font-size: 1.5rem;
+  font-size: 16px;
+  line-height: 1.5;
   padding: 1rem;
   border-radius: 0.5rem;
   background: #363a4f;
@@ -79,9 +96,21 @@ button:hover {
   background: #268678;
 }
 button.loading {
-  cursor: wait;
+  cursor: progress;
   animation: pulsing 1s ease-in-out infinite alternate;
 }
+button.secondary {
+  background: #5b6078;
+}
+button.secondary:hover {
+  background: #6e738d;
+}
+button.done {
+  background: #2c589f;
+}
+button.done:hover {
+  background: #3866b0;
+}
 
 i.ti.ti-loader-2 {
   display: inline-block;

lingosynth/app/static/css/input.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["input.sass","_vars.sass"],"names":[],"mappings":"AAEA;EACI;IACI;;EACJ;IACI;;;AAGR;EACI;IACI,YCHM;;EDKV;IACI,YCRC;;;ADUT;EACI;IACI;;EAEJ;IACI;;;AAER;EACI;EACA;EACA,YCNO;EDOP;EACA;;AAEA;EACI;EACA;EAKA;;AAHA;EACI;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;;AAEZ;EACI;EACA;EACA;EACA;EACA;EACA,YCtCO;EDuCP,OC/CG;EDgDH;EACA;EACA;EAEA;EAEA;;;AAEJ;EACI;EACA;EACA;EACA,YCjEQ;EDkER;EACA;EACA;EAEA,OCjEG;;ADmEH;EACI,YC1EC;;AD4EL;EACI;EACA;;;AAGR;EACI;EACA","sourcesContent":["@import '_vars'\r\n\r\n@keyframes rotate-gradient\r\n    from\r\n        transform: rotate(0deg) scale(2)\r\n    to\r\n        transform: rotate(360deg) scale(2)\r\n\r\n\r\n@keyframes pulsing\r\n    0%\r\n        background: $accent-dead\r\n        \r\n    100%\r\n        background: $accent\r\n\r\n@keyframes rotate\r\n    0%\r\n        transform: rotate(0deg)\r\n        \r\n    100%\r\n        transform: rotate(360deg)\r\n\r\ndiv.input-wrapper\r\n    position: relative\r\n    overflow: hidden\r\n    background: $surface0\r\n    padding: 2px 3px\r\n    border-radius: 0.5rem\r\n\r\n    &.loading\r\n        cursor: wait !important\r\n        position: relative\r\n\r\n        *\r\n            pointer-events: none\r\n\r\n        animation: pulsing 1s ease-in-out infinite alternate\r\n\r\n        &::before\r\n            content: ''\r\n            display: block\r\n            z-index: -1\r\n            position: absolute\r\n            top: 1rem\r\n            left: 1rem\r\n            right: 1rem\r\n            bottom: 1rem\r\n\r\n            background-image: conic-gradient(from 0deg, $accent, $yellow, $accent)\r\n            animation: rotate-gradient 1s linear infinite\r\n\r\ntextarea\r\n    width: 100%\r\n    height: 300px\r\n    font-size: 1.5rem\r\n    padding: 1rem\r\n    border-radius: 0.5rem\r\n    background: $surface0\r\n    color: $text\r\n    resize: none\r\n    outline: none\r\n    transition: border 0.1s ease-in-out\r\n\r\n    min-height: 300px\r\n\r\n    box-shadow: 0 0 40px 0 $crust\r\n\r\nbutton\r\n    margin-top: 1rem\r\n    padding: 0.8rem 1.5rem\r\n    border-radius: 0.5rem\r\n    background: $accent-bg\r\n    font-size: 18px\r\n    cursor: pointer\r\n    transition: background 0.1s ease-in-out\r\n\r\n    color: $text\r\n\r\n    &:hover\r\n        background: $accent\r\n\r\n    &.loading\r\n        cursor: wait\r\n        animation: pulsing 1s ease-in-out infinite alternate\r\n        // pointer-events: none\r\n\r\ni.ti.ti-loader-2\r\n    display: inline-block\r\n    animation: rotate 1s linear infinite\r\n","$red: #ed8796\r\n$maroon: #ee99a0\r\n$peach: #f5a97f\r\n$yellow: #eed49f\r\n$green: #a6da95\r\n\r\n$accent: #268678\r\n$accent-bg: #1c6e63\r\n$accent-dead: #54867e\r\n\r\n$teal: #2bafb9\r\n\r\n$text: #eaedf7\r\n$subtext1: #b8c0e0\r\n$subtext0: #a5adcb\r\n$overlay2: #939ab7\r\n$overlay1: #8087a2\r\n$overlay0: #6e738d\r\n$surface2: #5b6078\r\n$surface1: #494d64\r\n$surface0: #363a4f\r\n$base: #24273a\r\n$mantle: #1e2030\r\n$crust: #181926"]}
+{"version":3,"sourceRoot":"","sources":["input.sass","_vars.sass"],"names":[],"mappings":"AAEA;EACI;IACI;;EACJ;IACI;;;AAGR;EACI;IACI,YCHM;;EDKV;IACI,YCRC;;;ADUT;EACI;IACI;;EAEJ;IACI;;;AAER;EACI;EACA;EAEA,YCJO;EDMP;EACA;;AAEA;EACI;;AAEJ;EACI,YCdG;;ADgBP;EACI;;AAEJ;EACI,YCpCC;EDqCD,OC5BD;;AD8BH;EACI;;AAEJ;EACI;EACA;EAKA;;AAHA;EACI;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;;AAEZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA,YCtDO;EDuDP,OC/DG;EDgEH;EACA;EACA;EAEA;EAEA;;;AAEJ;EACI;EACA;EACA;EACA,YCpFQ;EDqFR;EACA;EACA;EAEA,OCjFG;;ADmFH;EACI,YC7FC;;AD+FL;EACI;EACA;;AAEJ;EACI,YCrFG;;ADuFH;EACI,YCzFD;;AD2FP;EACI,YCtGF;;ADwGE;EACI,YCxGA;;;AD0GZ;EACI;EACA","sourcesContent":["@import '_vars'\r\n\r\n@keyframes rotate-gradient\r\n    from\r\n        transform: rotate(0deg) scale(2)\r\n    to\r\n        transform: rotate(360deg) scale(2)\r\n\r\n\r\n@keyframes pulsing\r\n    0%\r\n        background: $accent-dead\r\n        \r\n    100%\r\n        background: $accent\r\n\r\n@keyframes rotate\r\n    0%\r\n        transform: rotate(0deg)\r\n        \r\n    100%\r\n        transform: rotate(360deg)\r\n\r\ndiv.input-wrapper\r\n    position: relative\r\n    overflow: hidden\r\n\r\n    background: $surface0\r\n\r\n    padding: 2px 3px\r\n    border-radius: 0.5rem\r\n\r\n    *\r\n        border-color: $surface0 !important\r\n\r\n    .CodeMirror\r\n        background: $surface1\r\n\r\n    .CodeMirror-wrap:first-child\r\n        background: green !important\r\n\r\n    *::selection\r\n        background: $accent\r\n        color: $text\r\n\r\n    .CodeMirror-cursors\r\n        filter: invert(1)\r\n\r\n    &.loading\r\n        cursor: wait !important\r\n        position: relative\r\n\r\n        *\r\n            pointer-events: none\r\n\r\n        animation: pulsing 1s ease-in-out infinite alternate\r\n\r\n        &::before\r\n            content: ''\r\n            display: block\r\n            z-index: -1\r\n            position: absolute\r\n            top: 1rem\r\n            left: 1rem\r\n            right: 1rem\r\n            bottom: 1rem\r\n\r\n            background-image: conic-gradient(from 0deg, $teal, $yellow, $peach)\r\n            animation: rotate-gradient 1s linear infinite\r\n\r\ntextarea\r\n    width: 100%\r\n    height: 400px\r\n    font-size: 16px\r\n    line-height: 1.5\r\n    padding: 1rem\r\n    border-radius: 0.5rem\r\n    background: $surface0\r\n    color: $text\r\n    resize: none\r\n    outline: none\r\n    transition: border 0.1s ease-in-out\r\n\r\n    min-height: 300px\r\n\r\n    box-shadow: 0 0 40px 0 $crust\r\n\r\nbutton\r\n    margin-top: 1rem\r\n    padding: 0.8rem 1.5rem\r\n    border-radius: 0.5rem\r\n    background: $accent-bg\r\n    font-size: 18px\r\n    cursor: pointer\r\n    transition: background 0.1s ease-in-out\r\n\r\n    color: $text\r\n\r\n    &:hover\r\n        background: $accent\r\n\r\n    &.loading\r\n        cursor: progress\r\n        animation: pulsing 1s ease-in-out infinite alternate\r\n\r\n    &.secondary\r\n        background: $surface2\r\n\r\n        &:hover\r\n            background: $overlay0\r\n\r\n    &.done\r\n        background: $alt\r\n\r\n        &:hover\r\n            background: $alt-light\r\n\r\ni.ti.ti-loader-2\r\n    display: inline-block\r\n    animation: rotate 1s linear infinite\r\n","$red: #ed8796\r\n$maroon: #ee99a0\r\n$peach: #f5a97f\r\n$yellow: #eed49f\r\n$green: #a6da95\r\n\r\n$accent: #268678\r\n$accent-bg: #1c6e63\r\n$accent-dead: #54867e\r\n\r\n$alt: #2c589f\r\n$alt-light: #3866b0\r\n\r\n$teal: #2bafb9\r\n\r\n$text: #eaedf7\r\n$subtext1: #b8c0e0\r\n$subtext0: #a5adcb\r\n$overlay2: #939ab7\r\n$overlay1: #8087a2\r\n$overlay0: #6e738d\r\n$surface2: #5b6078\r\n$surface1: #494d64\r\n$surface0: #363a4f\r\n$base: #24273a\r\n$mantle: #1e2030\r\n$crust: #181926"]}

lingosynth/app/static/css/input.sass

@@ -24,10 +24,28 @@
 div.input-wrapper
     position: relative
     overflow: hidden
+
     background: $surface0
+
     padding: 2px 3px
     border-radius: 0.5rem
 
+    *
+        border-color: $surface0 !important
+
+    .CodeMirror
+        background: $surface1
+
+    .CodeMirror-wrap:first-child
+        background: green !important
+
+    *::selection
+        background: $accent
+        color: $text
+
+    .CodeMirror-cursors
+        filter: invert(1)
+
     &.loading
         cursor: wait !important
         position: relative
@@ -47,13 +65,14 @@ div.input-wrapper
             right: 1rem
             bottom: 1rem
 
-            background-image: conic-gradient(from 0deg, $accent, $yellow, $accent)
+            background-image: conic-gradient(from 0deg, $teal, $yellow, $peach)
             animation: rotate-gradient 1s linear infinite
 
 textarea
     width: 100%
-    height: 300px
+    height: 400px
-    font-size: 1.5rem
+    font-size: 16px
+    line-height: 1.5
     padding: 1rem
     border-radius: 0.5rem
     background: $surface0
@@ -81,9 +100,20 @@ button
         background: $accent
 
     &.loading
-        cursor: wait
+        cursor: progress
         animation: pulsing 1s ease-in-out infinite alternate
-        // pointer-events: none
+
+    &.secondary
+        background: $surface2
+
+        &:hover
+            background: $overlay0
+
+    &.done
+        background: $alt
+
+        &:hover
+            background: $alt-light
 
 i.ti.ti-loader-2
     display: inline-block

lingosynth/app/static/css/main.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["main.sass","_vars.sass"],"names":[],"mappings":"AAEA;EACI;;;AAEJ;EACI;EACA,kBCcG;;;ADZP;EACI,OCEG;EDDH;EACA;EACA;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;;;AAEJ;EACI;;;AAGA;EACI;EACA;EACA;;AAEA;EACI;;;AAEZ;EACI","sourcesContent":["@import '_vars'\r\n\r\nhtml\r\n    scroll-behavior: smooth\r\n\r\nbody\r\n    margin: 1rem\r\n    background-color: $base\r\n\r\n*\r\n    color: $text\r\n    border: none\r\n    outline: none\r\n    box-sizing: border-box\r\n    font-family: 'Inter', sans-serif\r\n\r\nnav, header, main, footer\r\n    max-width: 800px\r\n    margin: 0 auto\r\n\r\nmain\r\n    margin-block: 3rem\r\n\r\np, li\r\n    line-height: 1.7\r\n\r\nnav\r\n    a\r\n        opacity: 0.8\r\n        text-decoration: none\r\n        margin-right: 1rem\r\n\r\n        &:hover\r\n            opacity: 1\r\n\r\nfooter\r\n    opacity: 0.5\r\n","$red: #ed8796\r\n$maroon: #ee99a0\r\n$peach: #f5a97f\r\n$yellow: #eed49f\r\n$green: #a6da95\r\n\r\n$accent: #268678\r\n$accent-bg: #1c6e63\r\n$accent-dead: #54867e\r\n\r\n$teal: #2bafb9\r\n\r\n$text: #eaedf7\r\n$subtext1: #b8c0e0\r\n$subtext0: #a5adcb\r\n$overlay2: #939ab7\r\n$overlay1: #8087a2\r\n$overlay0: #6e738d\r\n$surface2: #5b6078\r\n$surface1: #494d64\r\n$surface0: #363a4f\r\n$base: #24273a\r\n$mantle: #1e2030\r\n$crust: #181926"]}
+{"version":3,"sourceRoot":"","sources":["main.sass","_vars.sass"],"names":[],"mappings":"AAEA;EACI;;;AAEJ;EACI;EACA,kBCiBG;;;ADfP;EACI,OCKG;EDJH;EACA;EACA;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;;;AAEJ;EACI;;;AAGA;EACI;EACA;EACA;;AAEA;EACI;;;AAEZ;EACI","sourcesContent":["@import '_vars'\r\n\r\nhtml\r\n    scroll-behavior: smooth\r\n\r\nbody\r\n    margin: 1rem\r\n    background-color: $base\r\n\r\n*\r\n    color: $text\r\n    border: none\r\n    outline: none\r\n    box-sizing: border-box\r\n    font-family: 'Inter', sans-serif\r\n\r\nnav, header, main, footer\r\n    max-width: 800px\r\n    margin: 0 auto\r\n\r\nmain\r\n    margin-block: 3rem\r\n\r\np, li\r\n    line-height: 1.7\r\n\r\nnav\r\n    a\r\n        opacity: 0.8\r\n        text-decoration: none\r\n        margin-right: 1rem\r\n\r\n        &:hover\r\n            opacity: 1\r\n\r\nfooter\r\n    opacity: 0.5\r\n","$red: #ed8796\r\n$maroon: #ee99a0\r\n$peach: #f5a97f\r\n$yellow: #eed49f\r\n$green: #a6da95\r\n\r\n$accent: #268678\r\n$accent-bg: #1c6e63\r\n$accent-dead: #54867e\r\n\r\n$alt: #2c589f\r\n$alt-light: #3866b0\r\n\r\n$teal: #2bafb9\r\n\r\n$text: #eaedf7\r\n$subtext1: #b8c0e0\r\n$subtext0: #a5adcb\r\n$overlay2: #939ab7\r\n$overlay1: #8087a2\r\n$overlay0: #6e738d\r\n$surface2: #5b6078\r\n$surface1: #494d64\r\n$surface0: #363a4f\r\n$base: #24273a\r\n$mantle: #1e2030\r\n$crust: #181926"]}

lingosynth/app/static/css/utils.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["utils.sass","_vars.sass"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;EACA,YCYO;EDXP;EACA;;AAEA;EACI;;AAEJ;EACI,mBCfF;;ADiBF;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI,OC1BN","sourcesContent":["@import '_vars'\r\n\r\ndiv.alert\r\n    margin-block: 1rem\r\n    padding: 1rem\r\n    border-radius: 0.5rem\r\n    border-left: 0.5rem solid $accent\r\n    background: $surface1\r\n    transition: opacity 0.5s ease-in-out\r\n    position: relative\r\n\r\n    &.effect\r\n        opacity: 0\r\n\r\n    &.error\r\n        border-left-color: $red\r\n\r\n    i.ti.ti-x\r\n        position: absolute\r\n        top: 0.5rem\r\n        right: 0.5rem\r\n        font-size: 1.5rem\r\n        cursor: pointer\r\n        transition: color 0.1s ease-in-out\r\n\r\n        &:hover\r\n            color: $red\r\n","$red: #ed8796\r\n$maroon: #ee99a0\r\n$peach: #f5a97f\r\n$yellow: #eed49f\r\n$green: #a6da95\r\n\r\n$accent: #268678\r\n$accent-bg: #1c6e63\r\n$accent-dead: #54867e\r\n\r\n$teal: #2bafb9\r\n\r\n$text: #eaedf7\r\n$subtext1: #b8c0e0\r\n$subtext0: #a5adcb\r\n$overlay2: #939ab7\r\n$overlay1: #8087a2\r\n$overlay0: #6e738d\r\n$surface2: #5b6078\r\n$surface1: #494d64\r\n$surface0: #363a4f\r\n$base: #24273a\r\n$mantle: #1e2030\r\n$crust: #181926"]}
+{"version":3,"sourceRoot":"","sources":["utils.sass","_vars.sass"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;EACA,YCeO;EDdP;EACA;;AAEA;EACI;;AAEJ;EACI,mBCfF;;ADiBF;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI,OC1BN","sourcesContent":["@import '_vars'\r\n\r\ndiv.alert\r\n    margin-block: 1rem\r\n    padding: 1rem\r\n    border-radius: 0.5rem\r\n    border-left: 0.5rem solid $accent\r\n    background: $surface1\r\n    transition: opacity 0.5s ease-in-out\r\n    position: relative\r\n\r\n    &.effect\r\n        opacity: 0\r\n\r\n    &.error\r\n        border-left-color: $red\r\n\r\n    i.ti.ti-x\r\n        position: absolute\r\n        top: 0.5rem\r\n        right: 0.5rem\r\n        font-size: 1.5rem\r\n        cursor: pointer\r\n        transition: color 0.1s ease-in-out\r\n\r\n        &:hover\r\n            color: $red\r\n","$red: #ed8796\r\n$maroon: #ee99a0\r\n$peach: #f5a97f\r\n$yellow: #eed49f\r\n$green: #a6da95\r\n\r\n$accent: #268678\r\n$accent-bg: #1c6e63\r\n$accent-dead: #54867e\r\n\r\n$alt: #2c589f\r\n$alt-light: #3866b0\r\n\r\n$teal: #2bafb9\r\n\r\n$text: #eaedf7\r\n$subtext1: #b8c0e0\r\n$subtext0: #a5adcb\r\n$overlay2: #939ab7\r\n$overlay1: #8087a2\r\n$overlay0: #6e738d\r\n$surface2: #5b6078\r\n$surface1: #494d64\r\n$surface0: #363a4f\r\n$base: #24273a\r\n$mantle: #1e2030\r\n$crust: #181926"]}

lingosynth/app/static/js/index.js

@@ -2,6 +2,10 @@ function stopRephrasing() {
     rephraseButton.classList.remove('loading');
     textWrapper.classList.remove('loading');   
     rephraseIcon.className = 'ti ti-language'; 
+
+    copyButton.classList.remove('done');
+    copyIcon.className = 'ti ti-clipboard';
+    copyText.innerText = 'Copy';
 }
 
 function rephrase() {
@@ -38,7 +42,7 @@ function rephrase() {
 
         const errorDiv = document.createElement('div');
         errorDiv.className = 'error alert';
-        errorDiv.innerText = 'An error occurred. Please try again later.';
+        errorDiv.innerText = 'Sorry, an error has occurred. Please try again later.';
         popups.appendChild(errorDiv);
 
         const closeButton = document.createElement('i');
@@ -56,3 +60,18 @@ document.addEventListener('keydown', function(event) {
         rephrase();
     }
 });
+
+function copy() {
+    textBox.select();
+    document.execCommand('copy');
+    textBox.setSelectionRange(0, 0);
+    textBox.blur();
+
+    copyButton.classList.add('done');
+    copyIcon.className = 'ti ti-clipboard-check';
+    copyText.innerText = 'Copied';
+}
+
+const easymde = new EasyMDE({
+    element: textBox,
+});

lingosynth/app/templates/components/base.html

@@ -11,6 +11,12 @@
 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
 
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
+
     <title>LingoSynth</title>
 </head>
 <body>

lingosynth/app/templates/index.html

@@ -19,7 +19,7 @@
 
 {% block content %}
     <h2>Try it now!</h2>
-    <p>No account required.</p>
+    <p>No account required. Just paste the text you want to be rephrased!</p>
 
     <div id="popups"></div>
     <div id="get-started"></div>
@@ -43,8 +43,12 @@
         <i id="rephraseIcon" class="ti ti-language"></i>
         Rephrase
     </button>
+    <button class="secondary" id="copyButton" onclick="copy()">
+        <i id="copyIcon" class="ti ti-clipboard"></i>
+        <span id="copyText">Copy</span>
+    </button>
     <p>This can take several minutes for longer texts!</p>
-    <p>Feel free to visit another browser tab if you want to.</p>
+    <p>Feel free to visit another browser tab if you want to. Just don't close this tab.</p>
 
 {% endblock %}
 {% block scripts %}