Upload folder using huggingface_hub

.database/template_asset_db.json

@@ -0,0 +1,47 @@
+{
+    "asset_collection": {
+        "1": {
+            "_id": "local_assets",
+            "white_reddit_template": {
+                "path": "public/white_reddit_template.png",
+                "type": "image",
+                "ts": "2023-07-03 19:41:55",
+                "required": true
+            },
+            "subscribe-animation": {
+                "path": "public/subscribe-animation.mp4",
+                "type": "video",
+                "ts": "2023-07-03 21:37:53",
+                "required": true
+            }
+        },
+        "2": {
+            "_id": "remote_assets",
+            "Music joakim karud dreams": {
+                "type": "background music",
+                "url": "https://www.youtube.com/watch?v=p56gqDhUYbU",
+                "ts": "2023-07-05 04:35:03"
+            },
+            "Music dj quads": {
+                "type": "background music",
+                "url": "https://www.youtube.com/watch?v=uUu1NcSHg2E",
+                "ts": "2023-07-05 05:03:44"
+            },
+            "Car race gameplay": {
+                "type": "background video",
+                "url": "https://www.youtube.com/watch?v=gBsJA8tCeyc",
+                "ts": "2023-07-04 23:07:44"
+            },
+            "Minecraft jumping circuit": {
+                "url": "https://www.youtube.com/watch?v=Pt5_GSKIWQM",
+                "type": "background video",
+                "ts": "2023-07-07 04:13:36"
+            },
+            "Ski gameplay": {
+                "url": "https://www.youtube.com/watch?v=8ao1NAOVKTU",
+                "type": "background video",
+                "ts": "2023-07-07 04:54:16"
+            }
+        }
+    }
+}

.gitattributes

@@ -1,35 +1,36 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text
+public/subscribe-animation.mp4 filter=lfs diff=lfs merge=lfs -text

.github/CHANGE_LOG.md

@@ -0,0 +1,34 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## [Unreleased]
+
+<!--
+Notes for any unreleased changes do here. When a new release is cut, move these from
+the unreleased section to the section for the new release.
+-->
+
+Upcoming changes.
+
+### Added
+
+### Changed
+
+### Removed
+
+## [0.0.1] - YYYY-MM-DD
+
+Initial Release.
+
+### Added
+
+- What was added.
+
+
+<!--
+These Markdown anchors provide a link to the diff for each release. They should be
+updated any time a new release is cut.
+-->
+[Unreleased]: /
+[0.0.1]: /v0.0.1

.github/CODEOWNERS

@@ -0,0 +1,6 @@
+# These owners will be the default owners for everything in
+# the repo. Unless a later match takes precedence,
+# @USER will be requested for
+# review when someone opens a pull request.
+# if you want to add more owners just write it after the demo user @DemoUser
+*       @RayVentura

.github/CODE_OF_CONDUCT.md

@@ -0,0 +1,127 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior,  harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.

.github/CONTRIBUTING.md

@@ -0,0 +1,21 @@
+🌟💻📚
+
+## Contributing
+
+There are many exciting ways to contribute to ShortGPT, our AI automated content creation framework. 👏
+
+See below for everything you can do and the processes to follow for each contribution method. Note that no matter how you contribute, your participation is governed by our ✨[Code of Conduct](CODE_OF_CONDUCT.md)✨.
+
+## 🛠️ Make changes to the code or docs
+
+- 🍴 Fork the project, 
+- 💡 make your changes,
+- 🔀 and send a pull request! 🙌
+
+Make sure you read and follow the instructions in the [pull request template](pull_request_template.md). And note that all participation in this project (including code submissions) is governed by our ✨[Code of Conduct](CODE_OF_CONDUCT.md)✨.
+
+## 🐞📝 Submit bug reports or feature requests
+
+Just use the GitHub issue tracker to submit your bug reports and feature requests. We appreciate your feedback! 🐛🔧
+
+Let's make ShortGPT even better together! 🚀❤️

.github/ISSUE_TEMPLATE/bug_report.yaml

@@ -0,0 +1,99 @@
+name: 🐛 Bug Report
+description: File a bug report
+title: '🐛 [Bug]: '
+labels: ['bug']
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to fill out this bug report!
+
+  - type: textarea
+    id: what-happened
+    attributes:
+      label: What happened?
+      description: Describe the issue here.
+      placeholder: Tell us what you see!
+    validations:
+      required: true
+
+  - type: dropdown
+    id: browsers
+    attributes:
+      label: What type of browser are you seeing the problem on?
+      multiple: true
+      options:
+        - Firefox
+        - Chrome
+        - Safari
+        - Microsoft Edge
+    validations:
+      required: true
+
+  - type: dropdown
+    id: operating-systems
+    attributes:
+      label: What type of Operating System are you seeing the problem on?
+      multiple: true
+      options:
+        - Linux
+        - Windows
+        - Mac
+        - Google Colab
+        - Other
+    validations:
+      required: true
+
+  - type: input
+    id: python-version
+    attributes:
+      label: Python Version
+      description: What version of Python are you using?
+      placeholder: e.g. Python 3.9.0
+    validations:
+      required: true
+
+  - type: input
+    id: application-version
+    attributes:
+      label: Application Version
+      description: What version of the application are you using?
+      placeholder: e.g. v1.2.3
+    validations:
+      required: true
+
+  - type: textarea
+    id: expected-behavior
+    attributes:
+      label: Expected Behavior
+      description: What did you expect to happen?
+      placeholder: What did you expect?
+    validations:
+      required: true
+
+  - type: textarea
+    id: error-message
+    attributes:
+      label: Error Message
+      description: What error message did you receive?
+      placeholder:
+      render: shell
+    validations:
+      required: false
+
+  - type: textarea
+    id: logs
+    attributes:
+      label: Code to produce this issue.
+      description: Please copy and paste any relevant code to re-produce this issue.
+      render: shell
+
+  - type: textarea
+    id: screenshots-assets
+    attributes:
+      label: Screenshots/Assets/Relevant links
+      description: If applicable, add screenshots, assets or any relevant links that can help understand the issue.
+      placeholder: Provide any relevant material here
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/feature_request.yaml

@@ -0,0 +1,36 @@
+name: ✨ Feature request
+description: Suggest an feature / idea for this project
+title: '✨ [Feature Request / Suggestion]: '
+labels: ['feature']
+body:
+  - type: markdown
+    attributes:
+      value: |
+        We appreciate your feedback on how to improve this project. Please be sure to include as much details & any resources if possible!
+
+  - type: textarea
+    id: Suggestion
+    attributes:
+      label: Suggestion / Feature Request
+      description: Describe the feature(s) you would like to see added.
+      placeholder: Tell us your suggestion
+    validations:
+      required: true
+
+  - type: textarea
+    id: why-usage
+    attributes:
+      label: Why would this be useful?
+      description: Describe why this feature would be useful.
+      placeholder: Tell us why this would be useful to have this feature
+    validations:
+      required: false
+
+  - type: textarea
+    id: screenshots-assets
+    attributes:
+      label: Screenshots/Assets/Relevant links
+      description: If applicable, add screenshots, assets or any relevant links that can help understand the issue.
+      placeholder: Provide any relevant material here
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/question.yaml

@@ -0,0 +1,17 @@
+name: ❓ Question
+description: Ask a question about this project
+title: '❓ [Question]: '
+labels: ['question']
+body:
+  - type: markdown
+    attributes:
+      value: |
+        We appreciate your interest in this project. Please be sure to include as much detail & context about your question as possible!
+
+  - type: textarea
+    id: Question
+    attributes:
+      label: Your Question
+      description: Describe your question in detail.
+    validations:
+      required: true

.github/SECURITY.md

@@ -0,0 +1,28 @@
+# Security Policy
+
+## Supported Versions
+
+| Version | Supported          |
+| ------- | ------------------ |
+| 0.0.x   | :x: |
+
+## 🔒️ Reporting a Vulnerability
+
+If you have identified a security vulnerability in system or product please `RayVentura` with your findings. We strongly recommend using our `PGP key` to prevent this information from falling into the wrong hands.
+
+### Disclosure Policy
+
+Upon receipt of a security report the following steps will be taken:
+
+- Acknowledge your report within 48 hours, and provide a further more detailed update within 48 hours.
+- Confirm the problem and determine the affected versions
+- Keep you informed of the progress towards resolving the problem and notify you when the vulnerability has been fixed.
+- Audit code to find any potential similar problems.
+- Prepare fixes for all releases still under maintenance. These fixes will be released as fast as possible.
+- Handle your report with strict confidentiality, and not pass on your personal details to third parties without your permission.
+
+Whilst the issue is under investigation
+
+- **Do** provide as much information as possible.
+- **Do not** exploit of the vulnerability or problem you have discovered.
+- **Do not** reveal the problem to others until it has been resolved.

.github/config.yml

@@ -0,0 +1,21 @@
+# Configuration for new-issue-welcome - https://github.com/behaviorbot/new-issue-welcome
+
+# Comment to be posted to on first time issues
+newIssueWelcomeComment: >
+  Thanks for opening your first issue! Reports like these help improve the project!
+
+# Configuration for new-pr-welcome - https://github.com/behaviorbot/new-pr-welcome
+
+# Comment to be posted to on PRs from first time contributors in your repository
+newPRWelcomeComment: >
+  Thanks for opening this pull request!
+
+# Configuration for first-pr-merge - https://github.com/behaviorbot/first-pr-merge
+
+# Comment to be posted to on pull requests merged by a first time user
+firstPRMergeComment: >
+  Congrats on merging your first pull request!
+
+# The keyword to find for Todo Bot issue
+todo:
+  keyword: '@todo'

.github/issue_label_bot.yaml

@@ -0,0 +1,4 @@
+label-alias:
+    bug: 'Type: Bug'
+    feature_request: 'Type: Feature'
+    question: 'Type: Question'

.github/pull_request_template.md

@@ -0,0 +1,30 @@
+## Proposed changes
+
+Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request. If it fixes a bug or resolves a feature request, be sure to link to that issue. 👀🔧
+
+## Types of changes
+
+What types of changes does your code introduce to this project?
+_Put an `x` in the boxes that apply_ 😄🚀
+
+- [ ] Bugfix (non-breaking change which fixes an issue) 🐛
+- [ ] New feature (non-breaking change which adds functionality) ✨
+- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) 💥
+- [ ] Documentation Update (if none of the other choices apply) 📖
+
+## Checklist
+
+_Put an `x` in the boxes that apply. You can also fill these out after creating the PR. If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code._ ✅
+
+- [ ] I have read the CONTRIBUTING.md 📚
+- [ ] I have added tests that prove my fix is effective or that my feature works ✅✔️
+- [ ] I have added necessary documentation (if appropriate) 📝
+
+## Further comments
+
+If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc... 💡❓
+
+
+## References and related issues (e.g. #1234)
+
+N/A 📌

.github/settings.yml

@@ -0,0 +1,190 @@
+repository:
+  # See https://developer.github.com/v3/repos/#edit for all available settings.
+
+  # The name of the repository. Changing this will rename the repository
+  #name: repo-name
+
+  # A short description of the repository that will show up on GitHub
+  #description: description of repo
+
+  # A URL with more information about the repository
+  #homepage: https://example.github.io/
+
+  # A comma-separated list of topics to set on the repository
+  #topics: project, template, project-template
+
+  # Either `true` to make the repository private, or `false` to make it public.
+  #private: false
+
+  # Either `true` to enable issues for this repository, `false` to disable them.
+  has_issues: true
+
+  # Either `true` to enable the wiki for this repository, `false` to disable it.
+  has_wiki: true
+
+  # Either `true` to enable downloads for this repository, `false` to disable them.
+  #has_downloads: true
+
+  # Updates the default branch for this repository.
+  default_branch: stable
+
+  # Either `true` to allow squash-merging pull requests, or `false` to prevent
+  # squash-merging.
+  #allow_squash_merge: true
+
+  # Either `true` to allow merging pull requests with a merge commit, or `false`
+  # to prevent merging pull requests with merge commits.
+  #allow_merge_commit: true
+
+  # Either `true` to allow rebase-merging pull requests, or `false` to prevent
+  # rebase-merging.
+  #allow_rebase_merge: true
+
+# Labels: define labels for Issues and Pull Requests
+labels:
+  - name: 'Type: Bug'
+    color: e80c0c
+    description: Something isn't working as expected.
+
+  - name: 'Type: Enhancement'
+    color: 54b2ff
+    description: Suggest an improvement for an existing feature.
+
+  - name: 'Type: Feature'
+    color: 54b2ff
+    description: Suggest a new feature.
+
+  - name: 'Type: Security'
+    color: fbff00
+    description: A problem or enhancement related to a security issue.
+
+  - name: 'Type: Question'
+    color: 9309ab
+    description: Request for information.
+
+  - name: 'Type: Test'
+    color: ce54e3
+    description: A problem or enhancement related to a test.
+
+  - name: 'Status: Awaiting Review'
+    color: 24d15d
+    description: Ready for review.
+
+  - name: 'Status: WIP'
+    color: 07b340
+    description: Currently being worked on.
+
+  - name: 'Status: Waiting'
+    color: 38C968
+    description: Waiting on something else to be ready.
+
+  - name: 'Status: Stale'
+    color: 66b38a
+    description: Has had no activity for some time.
+
+  - name: 'Duplicate'
+    color: EB862D
+    description: Duplicate of another issue.
+
+  - name: 'Invalid'
+    color: faef50
+    description: This issue doesn't seem right.
+
+  - name: 'Priority: High +'
+    color: ff008c
+    description: Task is considered higher-priority.
+
+  - name: 'Priority: Low -'
+    color: 690a34
+    description: Task is considered lower-priority.
+
+  - name: 'Documentation'
+    color: 2fbceb
+    description: An issue/change with the documentation.
+
+  - name: "Won't fix"
+    color: C8D9E6
+    description: Reported issue is working as intended.
+
+  - name: '3rd party issue'
+    color: e88707
+    description: This issue might be caused by a 3rd party script/package/other reasons
+
+  - name: 'Os: Windows'
+    color: AEB1C2
+    description: Is Windows-specific
+
+  - name: 'Os: Mac'
+    color: AEB1C2
+    description: Is Mac-specific
+
+  - name: 'Os: Linux'
+    color: AEB1C2
+    description: Is Linux-specific
+
+  - name: 'Os: Google Colab'
+    color: AEB1C2
+    description: Is Google Colab-specific
+#
+#
+# # Collaborators: give specific users access to this repository.
+# # See https://developer.github.com/v3/repos/collaborators/#add-user-as-a-collaborator for available options
+# collaborators:
+#   # - username: bkeepers
+#   #   permission: push
+#   # - username: hubot
+#   #   permission: pull
+
+#   # Note: `permission` is only valid on organization-owned repositories.
+#   # The permission to grant the collaborator. Can be one of:
+#   # * `pull` - can pull, but not push to or administer this repository.
+#   # * `push` - can pull and push, but not administer this repository.
+#   # * `admin` - can pull, push and administer this repository.
+#   # * `maintain` - Recommended for project managers who need to manage the repository without access to sensitive or destructive actions.
+#   # * `triage` - Recommended for contributors who need to proactively manage issues and pull requests without write access.
+
+# # See https://developer.github.com/v3/teams/#add-or-update-team-repository for available options
+# teams:
+#   - name: core
+#     # The permission to grant the team. Can be one of:
+#     # * `pull` - can pull, but not push to or administer this repository.
+#     # * `push` - can pull and push, but not administer this repository.
+#     # * `admin` - can pull, push and administer this repository.
+#     # * `maintain` - Recommended for project managers who need to manage the repository without access to sensitive or destructive actions.
+#     # * `triage` - Recommended for contributors who need to proactively manage issues and pull requests without write access.
+#     permission: admin
+#   - name: docs
+#     permission: push
+
+# branches:
+#   - name: master
+#     # https://developer.github.com/v3/repos/branches/#update-branch-protection
+#     # Branch Protection settings. Set to null to disable
+#     protection:
+#       # Required. Require at least one approving review on a pull request, before merging. Set to null to disable.
+#       required_pull_request_reviews:
+#         # The number of approvals required. (1-6)
+#         required_approving_review_count: 1
+#         # Dismiss approved reviews automatically when a new commit is pushed.
+#         dismiss_stale_reviews: true
+#         # Blocks merge until code owners have reviewed.
+#         require_code_owner_reviews: true
+#         # Specify which users and teams can dismiss pull request reviews. Pass an empty dismissal_restrictions object to disable. User and team dismissal_restrictions are only available for organization-owned repositories. Omit this parameter for personal repositories.
+#         dismissal_restrictions:
+#           users: []
+#           teams: []
+#       # Required. Require status checks to pass before merging. Set to null to disable
+#       required_status_checks:
+#         # Required. Require branches to be up to date before merging.
+#         strict: true
+#         # Required. The list of status checks to require in order to merge into this branch
+#         contexts: []
+#       # Required. Enforce all configured restrictions for administrators. Set to true to enforce required status checks for repository administrators. Set to null to disable.
+#       enforce_admins: true
+#       # Prevent merge commits from being pushed to matching branches
+#       required_linear_history: true
+#       # Required. Restrict who can push to this branch. Team and user restrictions are only available for organization-owned repositories. Set to null to disable.
+#       restrictions:
+#         apps: []
+#         users: []
+#         teams: []

.github/workflows/generate_release-changelog.yaml

@@ -0,0 +1,33 @@
+name: Create Release
+
+on:
+  push:
+    tags:
+      - 'v*' # Push events to matching v*, i.e. v1.0, v20.15.10
+
+jobs:
+  build:
+    name: Create Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Changelog
+        uses: Bullrich/generate-release-changelog@master
+        id: Changelog
+        env:
+          REPO: ${{ github.repository }}
+      - name: Create Release
+        id: create_release
+        uses: actions/create-release@latest
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # This token is provided by Actions, you do not need to create your own token
+        with:
+          tag_name: ${{ github.ref }}
+          release_name: Release ${{ github.ref }}
+          body: |
+            ${{ steps.Changelog.outputs.changelog }}
+          draft: false
+          prerelease: false

.github/workflows/update_space.yml

@@ -0,0 +1,28 @@
+name: Run Python script
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+
+    - name: Set up Python
+      uses: actions/setup-python@v2
+      with:
+        python-version: '3.9'
+
+    - name: Install Gradio
+      run: python -m pip install gradio
+
+    - name: Log in to Hugging Face
+      run: python -c 'import huggingface_hub; huggingface_hub.login(token="${{ secrets.hf_token }}")'
+
+    - name: Deploy to Spaces
+      run: gradio deploy

.gitignore

@@ -0,0 +1,28 @@
+!*.py
+!*.json
+!*.yaml
+!*.template
+*.pyc
+**/__pycache__/
+test.py
+public/*
+!public/white_reddit_template.png
+!public/subscribe-animation.mp4
+z_doc/*
+z_other/*
+videos/*
+.logs/
+.editing_assets/*
+.database/api_db.json
+.database/content_db.json
+.database/asset_db.json
+flagged/
+.vscode
+.env
+ShortGPT.egg-info
+dist
+build
+setup
+test.ipynb
+.venv/
+MANIFEST.in

CHANGES.txt

@@ -0,0 +1,14 @@
+# CHANGES
+
+## Version 0.1.2
+- Improving logs in content engines
+## Version 0.1.1
+- Adding AssetType in AssetDatabase
+- Adding ApiProvider in api_db
+- Fixing pip libary missing editing_framework module, prompt_template module
+## Version 0.1.0
+- Fixing the AssetDatabase when it's empty
+## Version 0.0.2
+- Implemented the content_translation_engine; a multilingual video dubbing content engine. The source can be found at shortGPT/engine/content_translation_engine.py.
+- Implemented the new EdgeTTS voice module; it can be found at shortgpt/audio/edge_voice_module.
+- Added documentation which can be found under docs/.

LICENSE

@@ -0,0 +1,35 @@
+ShortGPT License
+
+Depending on the type of your legal entity, you are granted permission to use ShortGPT for your project. Individuals and small companies are allowed to use ShortGPT to create videos for free (even commercial), while a company license is required for for-profit organizations of a certain size. This two-tier system was designed to ensure funding for this project while still allowing the source code to be available and the program to be free for most. Read below for the exact terms of use.
+
+    Free license
+    Company license
+
+Free license
+
+Copyright © 2023 ShortGPT
+Eligibility
+
+You are eligible to use ShortGPT for free if you are:
+
+    an individual
+    a for-profit organization with a gross revenue up to 314 159$ a year.
+    a non-profit or not-for-profit organization
+    evaluating whether ShortGPT is a good fit, and are not yet using it in a commercial way
+
+Allowed use cases
+
+Permission is hereby granted, free of charge, to any person eligible for the "Free license", to use the software non-commercially or commercially for the purpose of creating videos and images and to modify the software to their own liking, for the purpose of fulfilling their custom use case or to contribute bug fixes or improvements back to ShortGPT.
+Disallowed use cases
+
+It is not allowed to copy or modify ShortGPT code for the purpose of selling, renting, licensing, relicensing, or sublicensing your own derivate of ShortGPT.
+Warranty notice
+
+The software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose, and non-infringement. In no event shall the author or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.
+Support
+
+Support is provided on a best-we-can-do basis via GitHub Issues and Discord.
+Company license
+
+You are required to obtain a company license to use ShortGPT if you are not within the group of entities eligible for a free license. This license will enable you to use ShortGPT for the allowed use cases specified in the free license, and give you access to prioritized support.
+We will deduct 10% of the revenue generated from ShortGPT as part of the payment for the company license.

README.md

@@ -1,13 +1,203 @@
 ---
-title: SHORTgpt
-emoji: 📚
-colorFrom: blue
-colorTo: gray
+title: sHORTgpt
+app_file: runShortGPTColab.py
 sdk: gradio
-sdk_version: 4.37.2
-app_file: app.py
-pinned: false
-license: apache-2.0
+sdk_version: 3.38.0
 ---
+# 🚀🎬 ShortGPT
+[![](https://dcbadge.vercel.app/api/server/uERx39ru3R?compact=true&style=flat)](https://discord.gg/uERx39ru3R)
+[![Twitter](https://img.shields.io/twitter/url/https/twitter.com/rayventurahq.svg?style=social&label=Follow%20%40RayVentura)](https://twitter.com/RayVenturaHQ)
+[![GitHub star chart](https://img.shields.io/github/stars/rayventura/shortgpt?style=social)](https://star-history.com/#rayventura/shortgpt)
+<div align="center">
+    <img src="https://github.com/RayVentura/ShortGPT/assets/121462835/083c8dc3-bac5-42c1-a08d-3ff9686d18c5" alt="ShortGPT-logo" style="border-radius: 20px;" width="22%"/>
+</div>
+<div align="center">
+  <a href="https://discord.gg/uERx39ru3R">
+    <img src="https://img.shields.io/badge/discord-join%20chat-blue.svg" alt="Join our Discord" height="34">
+  </a>
+</div>
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+<div align="center">
+⚡ Automating video and short content creation with AI ⚡
+</div>
+
+## 🎥 Showcase ([Full video on YouTube](https://youtu.be/hpoSHq-ER8U))
+
+https://github.com/RayVentura/ShortGPT/assets/121462835/a802faad-0fd7-4fcb-aa82-6365c27ea5fe
+## 🎥 Voice Dubbing
+
+
+https://github.com/RayVentura/ShortGPT/assets/121462835/06f51b2d-f8b1-4a23-b299-55e0e18902ef
+
+## 🌟 Show Your Support
+We hope you find ShortGPT helpful! If you do, let us know by giving us a star ⭐ on the repo. It's easy, just click on the 'Star' button at the top right of the page. Your support means a lot to us and keeps us motivated to improve and expand ShortGPT. Thank you and happy content creating! 🎉 
+
+[![GitHub star chart](https://img.shields.io/github/stars/rayventura/shortgpt?style=social)](https://github.com/RayVentura/ShortGPT/stargazers)
+## 🛠️ How it works
+![alt text](https://github.com/RayVentura/ShortGPT/assets/121462835/fcee74d4-f856-4481-949f-244558bf3bfa)
+## 📝 Introduction to ShortGPT 
+ShortGPT is a powerful framework for automating content creation. It simplifies video creation, footage sourcing, voiceover synthesis, and editing tasks.
+
+- 🎞️ **Automated editing framework**: Streamlines the video creation process with an LLM oriented video editing language.
+
+- 📃 **Scripts and Prompts**: Provides ready-to-use scripts and prompts for various LLM automated editing processes.
+
+- 🗣️ **Voiceover / Content Creation**: Supports multiple languages including English 🇺🇸, Spanish 🇪🇸, Arabic 🇦🇪, French 🇫🇷, Polish 🇵🇱, German 🇩🇪, Italian 🇮🇹, and Portuguese 🇵🇹.
+
+- 🔗 **Caption Generation**: Automates the generation of video captions.
+
+- 🌐🎥 **Asset Sourcing**: Sources images and video footage from the internet, connecting with the web and Pexels API as necessary.
+
+- 🧠 **Memory and persistency**: Ensures long-term persistency of automated editing variables with TinyDB.
+
+## 🚀 Quick Start: Run ShortGPT on Google Colab (https://colab.research.google.com/drive/1_2UKdpF6lqxCqWaAcZb3rwMVQqtbisdE?usp=sharing)
+
+If you prefer not to install the prerequisites on your local system, you can use the Google Colab notebook. This option is free and requires no installation setup.
+
+1. Click on the link to the Google Colab notebook: [https://colab.research.google.com/drive/1_2UKdpF6lqxCqWaAcZb3rwMVQqtbisdE?usp=sharing](https://colab.research.google.com/drive/1_2UKdpF6lqxCqWaAcZb3rwMVQqtbisdE?usp=sharing)
+
+2. Once you're in the notebook, simply run the cells in order from top to bottom. You can do this by clicking on each cell and pressing the 'Play' button, or by using the keyboard . Enjoy using ShortGPT!
+
+# Instructions for running shortGPT
+This guide provides step-by-step instructions for installing ImageMagick and FFmpeg on your system, which are both required to do automated editing. Once installed, you can proceed to run `runShortGPT.py` successfully.
+
+## Prerequisites
+Before you begin, ensure that you have the following prerequisites installed on your system:
+- Python 3.x
+- Pip (Python package installer)
+
+## Installation Steps
+Follow the instructions below to install ImageMagick, FFmpeg, and clone the shortGPT repository:
+
+### Step 1: Install ImageMagick
+1. For `Windows` download the installer from the official ImageMagick website and follow the installation instructions.
+      
+      [https://imagemagick.org/script/download.php](https://imagemagick.org/script/download.php)
+          
+2. For Ubuntu/Debian-based systems, use the command:
+     ```
+     sudo apt-get install imagemagick
+     ```
+     Then run the following command to fix a moviepy Imagemagick policy.xml incompatibility problem:
+     ```
+     !sed -i '/<policy domain="path" rights="none" pattern="@\*"/d' /etc/ImageMagick-6/policy.xml
+     ```    
+4. For macOS using Homebrew, use the command:
+     ```
+     brew install imagemagick
+     ```
+2. Verify the installation by running the following command:
+   ```
+   convert --version
+   ```
+   You should see the ImageMagick version information if the installation was successful.
+
+### Step 2: Install FFmpeg (REQUIRED FOR SHORTGPT TO WORK)
+1. For `Windows`Download the FFmpeg binaries from this Windows Installer (It will download ffmpeg, ffprobe and add it to your path).
+      
+      [https://github.com/icedterminal/ffmpeg-installer/releases/tag/6.0.0.20230306](https://github.com/icedterminal/ffmpeg-installer/releases/tag/6.0.0.20230306)
+      
+2. For macOS using Homebrew, use the command:
+     ```
+     brew install ffmpeg
+     ```   
+    For Ubuntu/Debian-based systems, use the command:
+     ```
+     sudo apt-get install ffmpeg
+     ```
+2. Verify the installation by running the following command:
+   ```
+   ffmpeg -version
+   ```
+   You should see the FFmpeg version information if the installation was successful.
+
+### Step 3: Clone the shortGPT Repository
+
+1. Open a terminal or command prompt.
+2. Execute the following command to clone the shortGPT repository:
+   ```
+   git clone https://github.com/rayventura/shortgpt.git
+   ```
+
+### Step 4: Install Python Dependencies
+
+1. Open a terminal or command prompt.
+2. Navigate to the directory where `runShortGPT.py` is located (the cloned repo).
+3. Execute the following command to install the required Python dependencies:
+   ```
+   pip install -r requirements.txt
+   ```
+
+   This command will install the necessary packages specified in the `requirements.txt` file.
+
+## Running runShortGPT.py Web Interface
+
+Once you have successfully installed ImageMagick, FFmpeg, and the Python dependencies, you can run `runShortGPT.py` by following these steps:
+
+1. Open a terminal or command prompt.
+2. Navigate to the directory where `runShortGPT.py` is located (the cloned repo).
+3. Execute the following command to run the script:
+   ```
+   python runShortGPT.py
+   ```
+4. After running the script, a Gradio interface should open at your local host on port 31415 (http://localhost:31415). 
+
+## Putting API Keys
+The ShortGPT UI needs you to input at least OpenAI and ElevenLabs api keys for running short automations. For video automations, you will also need to add a Pexels API.
+
+Follow these steps to add your OpenAI and ElevenLabs API keys:
+
+1. Open [http://localhost:31415/?__theme=light](http://localhost:31415/?__theme=light) from a web browser. 
+2. Click on the `config` tab located at the left side bar of the user interface.
+3. Add your `OPENAI API KEY` and `ELEVENLABS API KEY` in the corresponding input fields.
+4. Click `Save` to save your API keys.
+
+That's it! You have successfully set up your API keys and can now utilize the functionality of ShortGPT in the Gradio interface.
+
+## Framework overview
+
+- 🎬 The `ContentShortEngine` is designed for creating shorts, handling tasks from script generation to final rendering, including adding YouTube metadata.
+
+- 🎥 The `ContentVideoEngine` is ideal for longer videos, taking care of tasks like generating audio, automatically sourcing background video footage, timing captions, and preparing background assets.
+  
+- 🎞️ The automated `EditingEngine`, using Editing Markup Language and JSON, breaks down the editing process into manageable and customizable blocks, comprehensible to Large Language Models.
+
+💡 ShortGPT offers customization options to suit your needs, from language selection to watermark addition.
+
+🔧 As a framework, ShortGPT is adaptable and flexible, offering the potential for efficient, creative content creation.
+
+More documentation incomming, please be patient.
+
+
+## Technologies Used
+
+ShortGPT utilizes the following technologies to power its functionality:
+
+- **Moviepy**: Moviepy is used for video editing, allowing ShortGPT to make video editing and rendering
+
+- **Openai**: Openai is used for automating the entire process, including generating scripts and prompts for LLM automated editing processes.
+
+- **ElevenLabs**: ElevenLabs is used for voice synthesis, supporting multiple languages for voiceover creation.
+
+- **Pexels**: Pexels is used for sourcing background footage, allowing ShortGPT to connect with the web and access a wide range of images and videos.
+
+- **Bing Image**: Bing Image is used for sourcing images, providing a comprehensive database for ShortGPT to retrieve relevant visuals.
+
+These technologies work together to provide a seamless and efficient experience in automating video and short content creation with AI.
+
+## 💁 Contributing
+
+As an open-source project in a rapidly developing field, we are extremely open to contributions, whether it would be in the form of a new feature, improved infrastructure, or better documentation.
+
+## 🔗 Get in touch on Twitter 🐦
+
+Keep up with the latest happenings, announcements, and insights about Short-GPT by checking out our Twitter accounts. Spark a conversation with our developer and the AI's own account for fascinating dialogues, latest news about the project, and more.
+
+- **Developer**: Stay updated [@RayVentura](https://twitter.com/RayVenturaHQ). Deep-dive into behind-the-scenes, project news, and related topics from the person behind ShortGPT.
+
+We're eager to interact with you and listen to your feedback, concepts, and experiences with Short-GPT. Come on board on Twitter and let's navigate the future of AI as a team! 💡🤖
+<p align="center">
+  <a href="https://star-history.com/#RayVentura/ShortGPT&Date">
+    <img src="https://api.star-history.com/svg?repos=RayVentura/ShortGPT&type=Date" alt="Star History Chart">
+  </a>
+</p>

docs/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

docs/README.md

@@ -0,0 +1,10 @@
+# ShortGPT Documentation
+# Installation
+
+1. `yarn install` in the root of this repository (two level above this directory).
+1. In this directory, do `yarn start`.
+1. A browser window will open up, pointing to the docs.
+
+# Deployment
+
+Vercel handles the deployment of this website.

docs/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

docs/docs/how-to-install.mdx

@@ -0,0 +1,121 @@
+---
+title: Step-by-Step Guide to Installing ShortGPT
+sidebar_label: Installation Guide
+---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Launching Your ShortGPT Experience
+
+This guide will walk you through the process of setting up your machine to run the **ShortGPT** library. The setup requires two key components, ImageMagick and FFmpeg. Follow the steps below to get these dependencies installed.
+
+## Before You Begin
+
+Make sure you have the following installed on your machine:
+
+- Python 3.x
+- Pip (Python package installer)
+
+## Installation Process
+
+Here are the steps to install ImageMagick, FFmpeg, and the ShortGPT library.
+
+<Tabs groupId="operating-systems">
+  <TabItem value="win" label="Windows">
+
+### Step 1: Install ImageMagick 
+
+ImageMagick is a crucial component for ShortGPT. Download the installer from the official ImageMagick website. Click on the link below to get started.
+
+> **[👉 Download ImageMagick Here 👈](https://imagemagick.org/script/download.php)** 
+
+After downloading, follow the installation instructions provided on the website.
+
+### Step 2: Install FFmpeg (Essential for ShortGPT)
+
+FFmpeg is another key component for ShortGPT. Download the FFmpeg binaries from the link below:
+
+> **[👉 Download FFmpeg Here (click on 
+FFmpeg_Full.msi ) 👈](https://github.com/icedterminal/ffmpeg-installer/releases/tag/6.0.0.20230306)**
+
+The download will include ffmpeg and ffprobe and will add it to your path. Follow the installation instructions as guided.
+<details open>
+<summary><b>Step 3: Install ShortGPT Library</b></summary>
+
+- Open a terminal or command prompt.
+- Execute the following command:
+
+```bash
+pip install --upgrade shortgpt
+```
+
+</details>
+
+  </TabItem>
+
+  <TabItem value="mac" label="macOS">
+
+### Step 1: Install ImageMagick
+
+Run the command below in your command line:
+
+```bash
+brew install imagemagick
+```
+
+### Step 2: Install FFmpeg (Essential for ShortGPT)
+
+Run the command below in your command line:
+
+```bash
+brew install ffmpeg
+```
+
+<details open>
+<summary><b>Step 3: Install ShortGPT Library</b></summary>
+
+- Open a terminal or command prompt.
+- Execute the following command:
+
+```bash
+pip install --upgrade shortgpt
+```
+
+</details>
+
+  </TabItem>
+
+  <TabItem value="ubuntu" label="Ubuntu/Debian-based systems">
+
+### Step 1: Install ImageMagick
+
+Execute the following command:
+
+```bash
+sudo apt-get install imagemagick
+```
+
+### Step 2: Install FFmpeg
+
+Execute the following command:
+
+```bash
+sudo apt-get install ffmpeg
+```
+
+<details open>
+<summary><b>Step 3: Install ShortGPT Library</b></summary>
+
+- Open a terminal or command prompt.
+- Execute the following command:
+
+```bash
+pip install --upgrade shortgpt
+```
+
+</details>
+
+  </TabItem>
+</Tabs>
+
+And there you have it! Your machine is now ready to run ShortGPT. Dive into the world of automated video content creation with ShortGPT!

docs/docusaurus.config.js

@@ -0,0 +1,135 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+const lightCodeTheme = require('prism-react-renderer/themes/github');
+
+// With JSDoc @type annotations, IDEs can provide config autocompletion
+/** @type {import('@docusaurus/types').DocusaurusConfig} */
+(
+  module.exports = {
+    title: 'ShortGPT',
+    tagline:
+      'Open-Source Framework for AI content automation',
+    url: 'https://dev.shortgpt.ai',
+    baseUrl: '/',
+    favicon: 'img/favicon.ico',
+    organizationName: 'RayVentura',
+    projectName: 'ShortGPT',
+    onBrokenLinks: 'throw',
+    onBrokenMarkdownLinks: 'throw',
+    presets: [
+      [
+        '@docusaurus/preset-classic',
+        /** @type {import('@docusaurus/preset-classic').Options} */
+        ({
+          docs: {
+            path: 'docs',
+            sidebarPath: 'sidebars.js',
+            editUrl:
+              'https://github.com/RayVentura/ShortGPT/edit/stable/docs/',
+            versions: {
+              current: {
+                label: 'current',
+              },
+            },
+            lastVersion: 'current',
+            showLastUpdateAuthor: true,
+            showLastUpdateTime: true,
+          },
+          theme: {
+            customCss: require.resolve('./src/css/custom.css'),
+          },
+        }),
+      ],
+    ],
+    plugins: ['tailwind-loader'],
+    themeConfig:
+      /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+      ({
+        
+        navbar: {
+          hideOnScroll: true,
+          logo: {
+            alt: 'ShortGPT',
+            src: 'img/logo.png',
+          },
+          items: [
+            // left
+            {
+              label: 'Docs',
+              to: 'docs/how-to-install',
+              position: 'right',
+            },
+            // right
+            {
+              type: 'docsVersionDropdown',
+              position: 'right',
+            },
+            {
+              href: 'https://github.com/RayVentura/ShortGPT',
+              position: 'right',
+              className: 'header-github-link',
+            },
+          ],
+        },
+        colorMode: {
+          defaultMode: 'light',
+          disableSwitch: false,
+          respectPrefersColorScheme: true,
+        },
+        announcementBar: {
+          content:
+            '⭐️ If you like ShortGPT, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/rayventura/shortgpt">GitHub</a>! ⭐️',
+        },
+        footer: {
+          links: [
+            {
+              title: 'Docs',
+              items: [
+                {
+                  label: 'Getting Started',
+                  to: 'docs/how-to-install',
+                },
+
+              ],
+            },
+            {
+              title: 'ShortGPT',
+              items: [
+                {
+                  label: 'Issues',
+                  to: 'https://github.com/RayVentura/ShortGPT/issues',
+                },
+              ],
+            },
+            {
+              title: 'Community',
+              items: [
+                {
+                  label: 'Discord',
+                  to: 'https://discord.com/invite/bRTacwYrfX',
+                },
+              ],
+            },
+            {
+              title: 'Social',
+              items: [
+                {
+                  label: 'GitHub',
+                  to: 'https://github.com/RayVentura/ShortGPT',
+                },
+                {
+                  label: 'Twitter',
+                  to: 'https://twitter.com/RayVenturaHQ',
+                },
+              ],
+            },
+          ],
+          copyright: `ShortGPT ${new Date().getFullYear()}`,
+        },
+        prism: {
+          theme: lightCodeTheme,
+          darkTheme: darkCodeTheme,
+        },
+      }),
+  }
+);

docs/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "shortgpt-documentation",
+  "version": "3.5.1",
+  "private": true,
+  "scripts": {
+    "build:clean": "rm -rf dist build .docusaurus node_modules",
+    "docusaurus": "docusaurus",
+    "start": "docusaurus start",
+    "build": "docusaurus build",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy",
+    "clear": "docusaurus clear",
+    "serve": "docusaurus serve",
+    "write-translations": "docusaurus write-translations",
+    "write-heading-ids": "docusaurus write-heading-ids"
+  },
+  "dependencies": {
+    "@algolia/ui-library": "9.10.2",
+    "@docsearch/react": "3.5.1",
+    "@docusaurus/core": "2.4.1",
+    "@docusaurus/preset-classic": "2.4.1",
+    "@mdx-js/react": "^1.6.22",
+    "clsx": "^1.1.1",
+    "file-loader": "6.2.0",
+    "my-loaders": "file:plugins/my-loaders",
+    "postcss": "8.4.25",
+    "postcss-import": "15.0.0",
+    "postcss-preset-env": "7.8.2",
+    "prism-react-renderer": "1.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwind-loader": "file:plugins/tailwind-loader",
+    "url-loader": "4.1.1"
+  },
+  "devDependencies": {
+    "postcss-loader": "6.2.1",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat"
+  },
+  "browserslist": {
+    "production": [
+      ">0.5%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

docs/plugins/my-loaders/index.js

@@ -0,0 +1,18 @@
+module.exports = function () {
+  return {
+    name: 'loaders',
+    configureWebpack() {
+      return {
+        module: {
+          rules: [
+            {
+              test: /\.(gif|png|jpe?g|svg)$/i,
+              exclude: /\.(mdx?)$/i,
+              use: ['file-loader', { loader: 'image-webpack-loader' }],
+            },
+          ],
+        },
+      };
+    },
+  };
+};

docs/plugins/tailwind-loader/index.js

@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+module.exports = function () {
+  return {
+    name: 'postcss-tailwindcss-loader',
+    configurePostCss(postcssOptions) {
+      postcssOptions.plugins.push(
+        require('postcss-import'),
+        require('tailwindcss'),
+        require('postcss-preset-env')({
+          autoprefixer: {
+            flexbox: 'no-2009',
+          },
+          stage: 4,
+        })
+      );
+      return postcssOptions;
+    },
+  };
+};

docs/sidebars.js

@@ -0,0 +1,20 @@
+/**
+ * Creating a sidebar enables you to:
+ * - create an ordered group of docs
+ * - render a sidebar for each doc of that group
+ * - provide next/previous navigation.
+ *
+ * The sidebars can be generated from the filesystem, or explicitly defined here.
+ *
+ * Create as many sidebars as you want.
+ */
+
+module.exports = {
+  docs: [
+    {
+      type: 'category',
+      label: 'Introduction',
+      items: ['how-to-install'],
+    }, 
+  ],
+};

docs/src/components/Home.js

@@ -0,0 +1,356 @@
+import { Hero } from '@algolia/ui-library';
+import { useColorMode } from '@docusaurus/theme-common';
+import { useBaseUrlUtils } from '@docusaurus/useBaseUrl';
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+function Home() {
+  const { withBaseUrl } = useBaseUrlUtils();
+  const { colorMode } = useColorMode();
+
+  React.useEffect(() => {
+    if (colorMode === 'dark') {
+      document.querySelector('html').classList.add('dark');
+    } else {
+      document.querySelector('html').classList.remove('dark');
+    }
+  }, [colorMode]);
+
+  function Header() {
+    return (
+      <Hero
+        id="hero"
+        title={
+          <>
+
+            <span className="hero-title text-4xl leading-10 font-extrabold text-blue-600 md:text-4xl lg:text-4xl md:leading-11 max-w-xs inline-block">
+              🚀🎬 SHORTGPT
+            </span>
+            <span className="hero-title text-3xl leading-9 font-extrabold md:text-3xl lg:text-3xl md:leading-10 max-w-xxs inline-block">
+              Opensource AI Content Automation Framework
+            </span>
+          </>
+        }
+        background="cubes"
+        cta={[
+          <Link
+            key="get-started"
+            to="/docs/how-to-install"
+            className="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-semibold rounded-full text-white bg-gradient-to-r from-purple-500 to-indigo-500 hover:from-purple-600 hover:to-indigo-600 hover:no-underline"
+          >
+            Get started
+          </Link>
+        ]}
+      />
+    );
+  }
+
+  function Description() {
+    return (
+      <>
+        {/* Description */}
+        <div className="py-8 overflow-hidden">
+          <div className="relative max-w-xl mx-auto px-4 md:px-6 lg:px-8 lg:max-w-screen-xl">
+            <div className="relative">
+              <h3 className="text-center text-3xl leading-8 font-extrabold tracking-tight md:text-4xl md:leading-10">
+                Automating video and short content creation with AI
+              </h3>
+              <p className="mt-4 max-w-3xl mx-auto text-center text-xl leading-7 text-description">
+                ShortGPT is a powerful framework for automating content creation. It simplifies video creation, footage sourcing, voiceover synthesis, and editing tasks.
+              </p>
+            </div>
+
+            <div className="pt-16">
+              <ul className="lg:grid lg:grid-cols-3 lg:col-gap-8 lg:row-gap-10">
+                <li>
+                  <div className="flex">
+                    <div className="flex-shrink-0">
+                      <div className="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
+                        <svg
+                          viewBox="0 0 20 20"
+                          fill="currentColor"
+                          className="search w-6 h-6"
+                        >
+                          <path
+                            fillRule="evenodd"
+                            d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+                            clipRule="evenodd"
+                          ></path>
+                        </svg>
+                      </div>
+                    </div>
+                    <div className="ml-4">
+                      <h4 className="text-lg leading-6 font-medium">
+                        Automated editing framework
+                      </h4>
+                      <p className="mt-2 text-base leading-6 text-description">
+                        ShortGPT streamlines the video creation process with an LLM oriented video editing language, making it easier to automate editing tasks.
+                      </p>
+                    </div>
+                  </div>
+                </li>
+                <li className="mt-10 lg:mt-0">
+                  <div className="flex">
+                    <div className="flex-shrink-0">
+                      <div className="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
+                        <svg
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                          className="user-group w-6 h-6"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth="2"
+                            d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+                          ></path>
+                        </svg>
+                      </div>
+                    </div>
+                    <div className="ml-4">
+                      <h4 className="text-lg leading-6 font-medium">
+                        Voiceover / Content Creation
+                      </h4>
+                      <p className="mt-2 text-base leading-6 text-description">
+                        ShortGPT supports multiple languages for voiceover synthesis, making it easy to create content in various languages.
+                      </p>
+                    </div>
+                  </div>
+                </li>
+                <li className="mt-10 lg:mt-0">
+                  <div className="flex">
+                    <div className="flex-shrink-0">
+                      <div className="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
+                        <svg
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                          className="device-mobile w-6 h-6"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth="2"
+                            d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"
+                          ></path>
+                        </svg>
+                      </div>
+                    </div>
+                    <div className="ml-4">
+                      <h4 className="text-lg leading-6 font-medium">
+                        Asset Sourcing
+                      </h4>
+                      <p className="mt-2 text-base leading-6 text-description">
+                        ShortGPT can source images and video footage from the internet, allowing you to easily find and use relevant visuals.
+                      </p>
+                    </div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        {/* How it works */}
+        <div className="diagonal-box py-16 bg-gray-200 overflow-hidden">
+          <div className="diagonal-content max-w-xl mx-auto px-4 md:px-6 lg:px-8 lg:max-w-screen-xl">
+            <div className="max-w-screen-xl mx-auto pt-6 px-4 md:px-6 lg:px-8">
+              <div className="max-w-4xl mx-auto text-center">
+                <h2 className="text-3xl leading-9 font-extrabold text-gray-900 md:text-4xl md:leading-10">
+                  How it works
+                </h2>
+                <p className="mt-4 max-w-2xl text-xl leading-7 text-gray-500 lg:mx-auto">
+                ShortGPT is an AI-powered framework that automates the process of content creation, from script generation to asset sourcing and video editing.
+                </p>
+              </div>
+            </div>
+
+            <div className="py-16">
+              <div className="max-w-xl mx-auto px-4 md:px-6 lg:max-w-screen-lg lg:px-8 ">
+                <div className="lg:grid lg:grid-cols-3 lg:gap-8">
+                  <div>
+                    <div className="flex items-center justify-center">
+                      <img
+                        className="h-200"
+                        src={withBaseUrl('img/assets/scraping.svg')}
+                        width="190px"
+                        height="220px"
+                      />
+                    </div>
+                    <div className="mt-10 lg:mt-0 p-4">
+                      <h5 className="text-lg leading-6 font-medium text-gray-900">
+                        Automated Editing Framework
+                      </h5>
+                      <p className="mt-2 text-base leading-6 text-gray-600">
+                      ShortGPT employs a heavy usage of LLMs and automated video editing libraries to streamline the video creation process (Ffmpeg, moviepy, ffprobe).
+                      </p>
+                    </div>
+                  </div>
+                  <div className="mt-10 lg:mt-0 p-4">
+                    <div className="h-200 flex items-center justify-center">
+                      <img
+                        src={withBaseUrl('img/assets/configuration.svg')}
+                        width="140px"
+                        height="220px"
+                        alt="Configuration of your crawler"
+                      />
+                    </div>
+                    <div>
+                      <h5 className="text-lg leading-6 font-medium text-gray-900">
+                        Voiceover / Content Creation
+                      </h5>
+                      <p className="mt-2 text-base leading-6 text-gray-600">
+                      ShortGPT integrates multiple neural voice synthesis engines (ElevenLabs, EdgeTTS), to allow human-like voice quality in the audio generated.
+                      </p>
+                    </div>
+                  </div>
+                  <div className="mt-10 lg:mt-0 p-4">
+                    <div className="h-200 flex items-center justify-center">
+                      <img
+                        src={withBaseUrl('img/assets/implementation.svg')}
+                        width="220px"
+                        height="220px"
+                        alt="Implementation on your website"
+                      />
+                    </div>
+                    <div>
+                      <h5 className="text-lg leading-6 font-medium text-gray-900">
+                        Asset Sourcing
+                      </h5>
+                      <p className="mt-2 text-base leading-6 text-gray-600">
+                      ShortGPT is equipped with an advanced asset sourcing module that can retrieve images and video footage from the internet. This feature allows for the easy incorporation of relevant visuals into the content (Pexels, youtube, and more soon).
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+    
+
+        {/* Powered by AI */}
+        <div className="py-16 bg-indigo-600 overflow-hidden lg:py-24">
+          <div className="text-center">
+            <h3 className="mt-2 text-3xl leading-8 font-extrabold text-white tracking-tight md:text-4xl md:leading-10">
+              Powered by AI
+            </h3>
+          </div>
+          <div className="relative max-w-xl mx-auto px-4 md:px-6 lg:px-8 lg:max-w-screen-xl">
+            <div className="relative lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center">
+              <div className="relative">
+                <ul className="mt-10">
+                  <li className="mt-10">
+                    <div className="flex">
+                      <div className="flex-shrink-0">
+                        <div className="flex items-center justify-center h-12 w-12 rounded-md bg-white text-indigo-500">
+                          <svg
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                            className="chip w-6 h-6"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth="2"
+                              d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"
+                            ></path>
+                          </svg>
+                        </div>
+                      </div>
+                      <div className="ml-4">
+                        <h5 className="text-lg leading-6 font-medium text-white">
+                          Automated Editing
+                        </h5>
+                        <p className="mt-2 text-base leading-6 text-gray-300">
+                          ShortGPT automates the video editing process, making it faster and more efficient with the help of AI.
+                        </p>
+                      </div>
+                    </div>
+                  </li>
+                  <li className="mt-10">
+                    <div className="flex">
+                      <div className="flex-shrink-0">
+                        <div className="flex items-center justify-center h-12 w-12 rounded-md bg-white text-indigo-500">
+                          <svg
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                            className="chat w-6 h-6"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth="2"
+                              d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+                            ></path>
+                          </svg>
+                        </div>
+                      </div>
+                      <div className="ml-4">
+                        <h5 className="text-lg leading-6 font-medium text-white">
+                          Voiceover / Content Creation
+                        </h5>
+                        <p className="mt-2 text-base leading-6 text-gray-300">
+                          ShortGPT supports multiple languages for voiceover synthesis, making it easy to create content in various languages.
+                        </p>
+                      </div>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+
+              <div className="relative">
+                <ul className="mt-10">
+                  <li className="mt-10">
+                    <div className="flex">
+                      <div className="flex-shrink-0">
+                        <div className="flex items-center justify-center h-12 w-12 rounded-md bg-white text-indigo-500">
+                          <svg
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                            className="backspace w-6 h-6"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth="2"
+                              d="M12 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2M3 12l6.414 6.414a2 2 0 001.414.586H19a2 2 0 002-2V7a2 2 0 00-2-2h-8.172a2 2 0 00-1.414.586L3 12z"
+                            ></path>
+                          </svg>
+                        </div>
+                      </div>
+                      <div className="ml-4">
+                        <h5 className="text-lg leading-6 font-medium text-white">
+                          Asset Sourcing
+                        </h5>
+                        <p className="mt-2 text-base leading-6 text-gray-300">
+                          ShortGPT can source images and video footage from the internet, allowing you to easily find and use relevant visuals.
+                        </p>
+                      </div>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </>
+    )
+  }
+
+
+
+  return (
+    <div id="tailwind">
+      <Header />
+      <Description />
+    </div>
+  );
+}
+
+export default Home;

docs/src/css/custom.css

@@ -0,0 +1,198 @@
+@import url(fragments.css);
+@import 'tailwindcss/tailwind.css';
+
+:root {
+  --ifm-font-size-base: 16px;
+  --ifm-code-font-size: 90%;
+  --ifm-background-color: var(--white);
+  --ifm-color-primary: var(--nebula-500);
+  --ifm-footer-background-color: var(--grey-100);
+  --ifm-menu-color-background-active: var(--ifm-color-emphasis-200);
+}
+
+html[data-theme='dark'] {
+  --ifm-font-base-color: #dee0f2;
+  --ifm-navbar-link-hover-color: #8b9dff;
+  --ifm-link-color: #8b9dff;
+  --ifm-menu-color-active: #8b9dff;
+  --ifm-background-color: #0a141c;
+  --ifm-footer-background-color: #0a141c;
+  --ifm-navbar-background-color: #21243d;
+  --ifm-menu-color-background-active: #21243d;
+}
+
+.docusaurus-highlight-code-line {
+  background-color: rgba(0, 0, 0, 0.1);
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
+}
+
+html[data-theme='dark'] .docusaurus-highlight-code-line {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.diagonal-box {
+  transform: skewY(-6deg);
+}
+
+.diagonal-content {
+  transform: skewY(6deg);
+}
+
+[class^='announcementBar'] {
+  z-index: 10;
+}
+
+.showcase {
+  background-color: #fff;
+}
+
+html[data-theme='dark'] .showcase {
+  background-color: #21243d;
+}
+
+.showcase-border {
+  border-color: rgba(243, 244, 246, 1);
+}
+
+html[data-theme='dark'] .showcase-border {
+  border-color: rgba(55, 65, 81, 1);
+}
+
+.text-description {
+  color: rgba(107, 114, 128, 1);
+}
+
+html[data-theme='dark'] .text-description {
+  color: rgba(209, 213, 219, 1);
+}
+
+/* apply */
+#hero-apply {
+  z-index: -1;
+  background-image: linear-gradient(
+    var(--ifm-footer-background-color),
+    var(--ifm-navbar-background-color)
+  );
+}
+
+html[data-theme='dark'] #hero-apply {
+  background-image: linear-gradient(
+    var(--ifm-navbar-background-color),
+    var(--ifm-background-color)
+  );
+}
+
+html[data-theme='dark'] #hero-apply > div:first-child {
+  opacity: 0.4;
+}
+
+.apply-form {
+  background-image: linear-gradient(#fff, #f5f5fa);
+  max-width: 600px;
+}
+
+html[data-theme='dark'] .apply-form {
+  background-image: radial-gradient(
+    circle at 50% 0px,
+    rgb(72, 76, 122),
+    rgb(35, 38, 59)
+  );
+}
+
+.apply-text {
+  color: #36395a;
+}
+
+html[data-theme='dark'] .apply-text {
+  color: #fff;
+}
+
+/* index */
+#hero {
+  background-image: linear-gradient(
+    var(--ifm-footer-background-color),
+    var(--ifm-navbar-background-color)
+  );
+}
+
+html[data-theme='dark'] #hero {
+  background-image: linear-gradient(
+    var(--ifm-navbar-background-color),
+    var(--ifm-background-color)
+  );
+}
+
+html[data-theme='dark'] #hero > div:first-child {
+  opacity: 0.4;
+}
+
+/**
+  * Hero component title overrides to match other heading styles
+  */
+.hero-title {
+  color: rgb(28, 30, 33);
+  font-family: var(--ifm-heading-font-family);
+}
+
+html[data-theme='dark'] .hero-title {
+  color: rgb(227, 227, 227);
+}
+
+
+.apply-button:hover {
+  color: #000000;
+}
+
+/* GitHub */
+.header-github-link:hover {
+  opacity: 0.6;
+}
+
+.header-github-link:before {
+  content: '';
+  width: 24px;
+  height: 24px;
+  display: flex;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
+    no-repeat;
+}
+
+html[data-theme='dark'] .header-github-link:before {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
+    no-repeat;
+}
+
+/* Images */
+.image-rendering-crisp {
+  image-rendering: crisp-edges;
+
+  /* alias for google chrome */
+  image-rendering: -webkit-optimize-contrast;
+}
+
+.image-rendering-pixel {
+  image-rendering: pixelated;
+}
+
+/* Tailwindcss */
+
+#tailwind dd,
+#tailwind dt {
+  margin: 0;
+}
+
+#tailwind *,
+#tailwind ::before,
+#tailwind ::after {
+  border-width: 0;
+  border-style: solid;
+}
+
+#tailwind ol,
+#tailwind ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}

docs/src/css/fragments.css

@@ -0,0 +1,2275 @@
+:root {
+  --transparent: transparent;
+  --white: #fff;
+  --grey-900: #23263b;
+  --grey-800: #36395a;
+  --grey-700: #484c7a;
+  --grey-600: #5a5e9a;
+  --grey-500: #777aaf;
+  --grey-400: #9698c3;
+  --grey-300: #b6b7d5;
+  --grey-200: #d6d6e7;
+  --grey-100: #f5f5fa;
+  --grey-050: #fcfcfd;
+  --grey-000: #fff;
+  --pink-900: #59063d;
+  --pink-800: #88085c;
+  --pink-700: #b80979;
+  --pink-600: #e90a96;
+  --pink-500: #f82caa;
+  --pink-400: #fb5abc;
+  --pink-300: #fd89ce;
+  --pink-200: #feb9e2;
+  --pink-100: #ffeaf6;
+  --nebula-900: #141d61;
+  --nebula-800: #1e2b8f;
+  --nebula-700: #2b3cbb;
+  --nebula-600: #3c4fe0;
+  --nebula-500: #5468ff;
+  --nebula-400: #7c8aff;
+  --nebula-300: #a3acff;
+  --nebula-200: #cacfff;
+  --nebula-100: #f2f3ff;
+  --cyan-900: #00526c;
+  --cyan-800: #00769b;
+  --cyan-700: #009bcb;
+  --cyan-600: #0db7eb;
+  --cyan-500: #2cc8f7;
+  --cyan-400: #5adaff;
+  --cyan-300: #89e5ff;
+  --cyan-200: #b9efff;
+  --cyan-100: #e8faff;
+  --green-900: #005e36;
+  --green-800: #028950;
+  --green-700: #06b66c;
+  --green-600: #0de589;
+  --green-500: #5feb9e;
+  --green-400: #88f0b3;
+  --green-300: #aaf4c8;
+  --green-200: #c9f8de;
+  --green-100: #e6fcf3;
+  --orange-900: #963209;
+  --orange-800: #bf470a;
+  --orange-700: #e8600a;
+  --orange-600: #f78125;
+  --orange-500: #faa04b;
+  --orange-400: #fcbc73;
+  --orange-300: #fed59a;
+  --orange-200: #ffe9c3;
+  --orange-100: #fff9ec;
+  --red-900: #83111e;
+  --red-800: #ab1325;
+  --red-700: #d4142a;
+  --red-600: #ee243c;
+  --red-500: #f4495d;
+  --red-400: #f86e7e;
+  --red-300: #fc95a1;
+  --red-200: #febdc5;
+  --red-100: #ffe6e9;
+  --current: currentColor;
+}
+.uil-bgc-transparent {
+  background-color: transparent;
+}
+.uil-bgc-white {
+  background-color: #fff;
+}
+.uil-bgc-grey-900 {
+  background-color: #23263b;
+}
+.uil-bgc-grey-800 {
+  background-color: #36395a;
+}
+.uil-bgc-grey-200 {
+  background-color: #d6d6e7;
+}
+.hover\:uil-bgc-grey-100:focus,
+.hover\:uil-bgc-grey-100:hover,
+.uil-bgc-grey-100 {
+  background-color: #f5f5fa;
+}
+.uil-bgc-pink-200 {
+  background-color: #feb9e2;
+}
+.uil-bgc-nebula-500 {
+  background-color: #5468ff;
+}
+.uil-bgc-nebula-200 {
+  background-color: #cacfff;
+}
+.uil-bgc-green-200 {
+  background-color: #c9f8de;
+}
+.uil-bgc-orange-200 {
+  background-color: #ffe9c3;
+}
+.uil-bgc-red-600 {
+  background-color: #ee243c;
+}
+.uil-bgc-red-500 {
+  background-color: #f4495d;
+}
+.uil-bgc-current {
+  background-color: currentColor;
+}
+@media (min-width: 960px) {
+  .md\:uil-bgc-transparent {
+    background-color: transparent;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-bgc-white {
+    background-color: #fff;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-bgc-grey-900 {
+    background-color: #23263b;
+  }
+}
+.uil-bgp-center {
+  background-position: 50%;
+}
+.uil-bgp-bottom {
+  background-position: bottom;
+}
+.uil-bgr-no-repeat {
+  background-repeat: no-repeat;
+}
+@media (min-width: 960px) {
+  .md\:uil-bgr-no-repeat {
+    background-repeat: no-repeat;
+  }
+}
+.uil-bgs-cover {
+  background-size: cover;
+}
+.uil-bgs-contain {
+  background-size: contain;
+}
+@media (min-width: 960px) {
+  .md\:uil-bgs-contain {
+    background-size: contain;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-bgs-cover {
+    background-size: cover;
+  }
+}
+.uil-bd-none {
+  border: none;
+}
+.uil-bdc-transparent {
+  border-color: transparent;
+}
+.uil-bdc-grey-800 {
+  border-color: #36395a;
+}
+.uil-bdc-grey-700 {
+  border-color: #484c7a;
+}
+.uil-bdc-grey-200 {
+  border-color: #d6d6e7;
+}
+.uil-bdc-grey-100 {
+  border-color: #f5f5fa;
+}
+.uil-bdc-pink-600 {
+  border-color: #e90a96;
+}
+.uil-bdc-nebula-500 {
+  border-color: #5468ff;
+}
+.uil-bdc-green-700 {
+  border-color: #06b66c;
+}
+.uil-bdc-orange-600 {
+  border-color: #f78125;
+}
+.uil-bdc-red-600 {
+  border-color: #ee243c;
+}
+@media (min-width: 960px) {
+  .md\:uil-bdc-transparent {
+    border-color: transparent;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-bdc-white {
+    border-color: #fff;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-bdc-grey-800 {
+    border-color: #36395a;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-bdc-grey-200 {
+    border-color: #d6d6e7;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-bdc-pink-600 {
+    border-color: #e90a96;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-bdc-nebula-500 {
+    border-color: #5468ff;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-bdc-green-700 {
+    border-color: #06b66c;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-bdc-orange-600 {
+    border-color: #f78125;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-bdc-red-600 {
+    border-color: #ee243c;
+  }
+}
+.uil-bdr-0 {
+  border-radius: 0;
+}
+.uil-bdr-2 {
+  border-radius: 2px;
+}
+.uil-bdr-4 {
+  border-radius: 4px;
+}
+.uil-bdr-6 {
+  border-radius: 6px;
+}
+.uil-bdr-8 {
+  border-radius: 8px;
+}
+.uil-bdr-20 {
+  border-radius: 20px;
+}
+.uil-bdr-max {
+  border-radius: 9999px;
+}
+@media (min-width: 960px) {
+  .md\:uil-bdr-4 {
+    border-radius: 4px;
+  }
+}
+.uil-bdtlr-0 {
+  border-top-left-radius: 0;
+}
+.uil-bdtlr-2 {
+  border-top-left-radius: 2px;
+}
+.uil-bdtlr-4 {
+  border-top-left-radius: 4px;
+}
+.uil-bdtlr-6 {
+  border-top-left-radius: 6px;
+}
+.uil-bdtlr-8 {
+  border-top-left-radius: 8px;
+}
+.uil-bdtlr-20 {
+  border-top-left-radius: 20px;
+}
+.uil-bdtrr-0 {
+  border-top-right-radius: 0;
+}
+.uil-bdtrr-2 {
+  border-top-right-radius: 2px;
+}
+.uil-bdtrr-4 {
+  border-top-right-radius: 4px;
+}
+.uil-bdtrr-6 {
+  border-top-right-radius: 6px;
+}
+.uil-bdtrr-8 {
+  border-top-right-radius: 8px;
+}
+.uil-bdtrr-20 {
+  border-top-right-radius: 20px;
+}
+.uil-bdblr-0 {
+  border-bottom-left-radius: 0;
+}
+.uil-bdblr-6 {
+  border-bottom-left-radius: 6px;
+}
+.uil-bdbrr-0 {
+  border-bottom-right-radius: 0;
+}
+.uil-bdbrr-6 {
+  border-bottom-right-radius: 6px;
+}
+@media (min-width: 960px) {
+  .md\:uil-bdbr-6 {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+}
+.uil-bds-solid {
+  border-style: solid;
+}
+@media (min-width: 960px) {
+  .md\:uil-bds-solid {
+    border-style: solid;
+  }
+}
+.uil-bdts-solid {
+  border-top-style: solid;
+}
+.uil-bdrs-solid {
+  border-right-style: solid;
+}
+.uil-bdbs-solid {
+  border-bottom-style: solid;
+}
+@media (min-width: 960px) {
+  .md\:uil-bdbs-solid {
+    border-bottom-style: solid;
+  }
+}
+.uil-bdw-0 {
+  border-width: 0;
+}
+.uil-bdw-1 {
+  border-width: 1px;
+}
+@media (min-width: 960px) {
+  .md\:uil-bdw-0 {
+    border-width: 0;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-bdw-2 {
+    border-width: 2px;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-bdlw-1 {
+    border-left-width: 1px;
+  }
+}
+.uil-bdtw-1 {
+  border-top-width: 1px;
+}
+.uil-bdtw-2 {
+  border-top-width: 2px;
+}
+@media (min-width: 960px) {
+  .md\:uil-bdtw-1 {
+    border-top-width: 1px;
+  }
+}
+.uil-bdrw-1 {
+  border-right-width: 1px;
+}
+.uil-bdbw-0 {
+  border-bottom-width: 0;
+}
+.uil-bdbw-1 {
+  border-bottom-width: 1px;
+}
+@media (min-width: 960px) {
+  .md\:uil-bdbw-1 {
+    border-bottom-width: 1px;
+  }
+}
+.uil-d-none {
+  display: none;
+}
+.uil-d-block {
+  display: block;
+}
+.uil-d-inline-block {
+  display: inline-block;
+}
+.uil-d-flex {
+  display: flex;
+}
+.uil-d-inline-flex {
+  display: inline-flex;
+}
+.uil-d-grid {
+  display: grid;
+}
+@media (min-width: 500px) {
+  .xs\:uil-d-block {
+    display: block;
+  }
+}
+@media (min-width: 768px) {
+  .sm\:uil-d-flex {
+    display: flex;
+  }
+}
+@media (min-width: 768px) {
+  .sm\:uil-d-grid {
+    display: grid;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-d-none {
+    display: none;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-d-block {
+    display: block;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-d-flex {
+    display: flex;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-d-grid {
+    display: grid;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-d-none {
+    display: none;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-d-block {
+    display: block;
+  }
+}
+@media (min-width: 1440px) {
+  .xl\:uil-d-inline-block {
+    display: inline-block;
+  }
+}
+.uil-m-0 {
+  margin: 0;
+}
+.uil-m-8 {
+  margin: 8px;
+}
+.uil-m-auto {
+  margin: auto;
+}
+@media (min-width: 960px) {
+  .md\:uil-m-0 {
+    margin: 0;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-m-auto {
+    margin: auto;
+  }
+}
+.uil-ml-0 {
+  margin-left: 0;
+}
+.uil-ml-8 {
+  margin-left: 8px;
+}
+.uil-ml-12 {
+  margin-left: 12px;
+}
+.uil-ml-auto {
+  margin-left: auto;
+}
+@media (min-width: 500px) {
+  .xs\:uil-ml-24 {
+    margin-left: 24px;
+  }
+}
+@media (min-width: 768px) {
+  .sm\:uil-ml-12 {
+    margin-left: 12px;
+  }
+}
+@media (min-width: 768px) {
+  .sm\:uil-ml-24 {
+    margin-left: 24px;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-ml-0 {
+    margin-left: 0;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-ml-8 {
+    margin-left: 8px;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-ml-50p {
+    margin-left: 50%;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-ml-auto {
+    margin-left: auto;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-ml-16 {
+    margin-left: 16px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-ml-48 {
+    margin-left: 48px;
+  }
+}
+@media (min-width: 1440px) {
+  .xl\:uil-ml-16 {
+    margin-left: 16px;
+  }
+}
+.uil-mt-0 {
+  margin-top: 0;
+}
+.uil-mt-4 {
+  margin-top: 4px;
+}
+.uil-mt-8 {
+  margin-top: 8px;
+}
+.uil-mt-12 {
+  margin-top: 12px;
+}
+.uil-mt-16 {
+  margin-top: 16px;
+}
+.uil-mt-20 {
+  margin-top: 20px;
+}
+.uil-mt-24 {
+  margin-top: 24px;
+}
+.uil-mt-32 {
+  margin-top: 32px;
+}
+.uil-mt-48 {
+  margin-top: 48px;
+}
+.uil-mt-80 {
+  margin-top: 80px;
+}
+@media (min-width: 500px) {
+  .xs\:uil-mt-0 {
+    margin-top: 0;
+  }
+}
+@media (min-width: 768px) {
+  .sm\:uil-mt-0 {
+    margin-top: 0;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-mt-0 {
+    margin-top: 0;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-mt-8 {
+    margin-top: 8px;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-mt-12 {
+    margin-top: 12px;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-mt-auto {
+    margin-top: auto;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-mt-8 {
+    margin-top: 8px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-mt-12 {
+    margin-top: 12px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-mt-20 {
+    margin-top: 20px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-mt-48 {
+    margin-top: 48px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-mt-120 {
+    margin-top: 120px;
+  }
+}
+.uil-mr-0 {
+  margin-right: 0;
+}
+.uil-mr-4 {
+  margin-right: 4px;
+}
+.uil-mr-8 {
+  margin-right: 8px;
+}
+.uil-mr-16 {
+  margin-right: 16px;
+}
+.uil-mr-32 {
+  margin-right: 32px;
+}
+.uil-mr-auto {
+  margin-right: auto;
+}
+@media (min-width: 960px) {
+  .md\:uil-mr-0 {
+    margin-right: 0;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-mr-8 {
+    margin-right: 8px;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-mr-20 {
+    margin-right: 20px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-mr-12 {
+    margin-right: 12px;
+  }
+}
+.uil-mb-0 {
+  margin-bottom: 0;
+}
+.uil-mb-8 {
+  margin-bottom: 8px;
+}
+.uil-mb-12 {
+  margin-bottom: 12px;
+}
+.uil-mb-16 {
+  margin-bottom: 16px;
+}
+.uil-mb-20 {
+  margin-bottom: 20px;
+}
+.uil-mb-24 {
+  margin-bottom: 24px;
+}
+.uil-mb-48 {
+  margin-bottom: 48px;
+}
+@media (min-width: 768px) {
+  .sm\:uil-mb-0 {
+    margin-bottom: 0;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-mb-0 {
+    margin-bottom: 0;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-mb-16 {
+    margin-bottom: 16px;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-mb-24 {
+    margin-bottom: 24px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-mb-20 {
+    margin-bottom: 20px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-mb-24 {
+    margin-bottom: 24px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-mb-80 {
+    margin-bottom: 80px;
+  }
+}
+.uil-mv-0 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.uil-mv-8 {
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+.uil-mh-0 {
+  margin-left: 0;
+  margin-right: 0;
+}
+.uil-mh-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+@media (min-width: 960px) {
+  .md\:uil-mh-12 {
+    margin-left: 12px;
+    margin-right: 12px;
+  }
+}
+.uil-ov-visible {
+  overflow: visible;
+}
+.uil-ov-hidden {
+  overflow: hidden;
+}
+.uil-ov-auto {
+  overflow: auto;
+}
+@media (min-width: 960px) {
+  .md\:uil-ov-hidden {
+    overflow: hidden;
+  }
+}
+.uil-ovx-scroll {
+  overflow-x: scroll;
+}
+.uil-ovx-auto {
+  overflow-x: auto;
+}
+.uil-ovy-hidden {
+  overflow-y: hidden;
+}
+.uil-ovy-auto {
+  overflow-y: auto;
+}
+.uil-p-0 {
+  padding: 0;
+}
+.uil-p-8 {
+  padding: 8px;
+}
+.uil-p-12 {
+  padding: 12px;
+}
+.uil-p-20 {
+  padding: 20px;
+}
+.uil-p-24 {
+  padding: 24px;
+}
+.uil-p-48 {
+  padding: 48px;
+}
+@media (min-width: 960px) {
+  .md\:uil-p-48 {
+    padding: 48px;
+  }
+}
+.uil-pl-0 {
+  padding-left: 0;
+}
+.uil-pl-8 {
+  padding-left: 8px;
+}
+.uil-pl-12 {
+  padding-left: 12px;
+}
+.uil-pl-16 {
+  padding-left: 16px;
+}
+.uil-pl-24 {
+  padding-left: 24px;
+}
+.uil-pl-48 {
+  padding-left: 48px;
+}
+@media (min-width: 960px) {
+  .md\:uil-pl-24 {
+    padding-left: 24px;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-pl-48 {
+    padding-left: 48px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-pl-32 {
+    padding-left: 32px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-pl-48 {
+    padding-left: 48px;
+  }
+}
+.uil-pt-0 {
+  padding-top: 0;
+}
+.uil-pt-12 {
+  padding-top: 12px;
+}
+.uil-pt-16 {
+  padding-top: 16px;
+}
+.uil-pt-24 {
+  padding-top: 24px;
+}
+.uil-pt-32 {
+  padding-top: 32px;
+}
+.uil-pt-48 {
+  padding-top: 48px;
+}
+@media (min-width: 960px) {
+  .md\:uil-pt-0 {
+    padding-top: 0;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-pt-24 {
+    padding-top: 24px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-pt-24 {
+    padding-top: 24px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-pt-32 {
+    padding-top: 32px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-pt-48 {
+    padding-top: 48px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-pt-80 {
+    padding-top: 80px;
+  }
+}
+.uil-pr-0 {
+  padding-right: 0;
+}
+.uil-pr-8 {
+  padding-right: 8px;
+}
+.uil-pr-16 {
+  padding-right: 16px;
+}
+.uil-pr-24 {
+  padding-right: 24px;
+}
+.uil-pr-32 {
+  padding-right: 32px;
+}
+.uil-pr-48 {
+  padding-right: 48px;
+}
+.uil-pr-80 {
+  padding-right: 80px;
+}
+@media (min-width: 960px) {
+  .md\:uil-pr-0 {
+    padding-right: 0;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-pr-24 {
+    padding-right: 24px;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-pr-48 {
+    padding-right: 48px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-pr-8 {
+    padding-right: 8px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-pr-48 {
+    padding-right: 48px;
+  }
+}
+.uil-pb-0 {
+  padding-bottom: 0;
+}
+.uil-pb-12 {
+  padding-bottom: 12px;
+}
+.uil-pb-16 {
+  padding-bottom: 16px;
+}
+.uil-pb-24 {
+  padding-bottom: 24px;
+}
+.uil-pb-48 {
+  padding-bottom: 48px;
+}
+.uil-pb-80 {
+  padding-bottom: 80px;
+}
+@media (min-width: 960px) {
+  .md\:uil-pb-24 {
+    padding-bottom: 24px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-pb-24 {
+    padding-bottom: 24px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-pb-48 {
+    padding-bottom: 48px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-pb-80 {
+    padding-bottom: 80px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-pb-120 {
+    padding-bottom: 120px;
+  }
+}
+.uil-pv-8 {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.uil-pv-16 {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+.uil-pv-20 {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+.uil-pv-24 {
+  padding-top: 24px;
+  padding-bottom: 24px;
+}
+.uil-pv-32 {
+  padding-top: 32px;
+  padding-bottom: 32px;
+}
+.uil-pv-48 {
+  padding-top: 48px;
+  padding-bottom: 48px;
+}
+.uil-pv-80 {
+  padding-top: 80px;
+  padding-bottom: 80px;
+}
+@media (min-width: 960px) {
+  .md\:uil-pv-120 {
+    padding-top: 120px;
+    padding-bottom: 120px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-pv-32 {
+    padding-top: 32px;
+    padding-bottom: 32px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-pv-48 {
+    padding-top: 48px;
+    padding-bottom: 48px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-pv-120 {
+    padding-top: 120px;
+    padding-bottom: 120px;
+  }
+}
+.uil-ph-0 {
+  padding-left: 0;
+  padding-right: 0;
+}
+.uil-ph-4 {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+.uil-ph-8 {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+.uil-ph-12 {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.uil-ph-16 {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+.uil-ph-20 {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+.uil-ph-24 {
+  padding-left: 24px;
+  padding-right: 24px;
+}
+.uil-ph-32 {
+  padding-left: 32px;
+  padding-right: 32px;
+}
+@media (min-width: 768px) {
+  .sm\:uil-ph-16 {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-ph-0 {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-ph-20 {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-ph-48 {
+    padding-left: 48px;
+    padding-right: 48px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-ph-20 {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-ph-32 {
+    padding-left: 32px;
+    padding-right: 32px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-ph-48 {
+    padding-left: 48px;
+    padding-right: 48px;
+  }
+}
+.uil-v-visible {
+  visibility: visible;
+}
+.uil-v-hidden {
+  visibility: hidden;
+}
+@media (min-width: 960px) {
+  .md\:uil-v-visible {
+    visibility: visible;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-v-hidden {
+    visibility: hidden;
+  }
+}
+.hover\:uil-color-white:focus,
+.hover\:uil-color-white:hover,
+.uil-color-white {
+  color: #fff;
+}
+.hover\:uil-color-grey-900:focus,
+.hover\:uil-color-grey-900:hover,
+.uil-color-grey-900 {
+  color: #23263b;
+}
+.uil-color-grey-800 {
+  color: #36395a;
+}
+.hover\:uil-color-grey-700:focus,
+.hover\:uil-color-grey-700:hover,
+.uil-color-grey-700 {
+  color: #484c7a;
+}
+.hover\:uil-color-grey-600:focus,
+.hover\:uil-color-grey-600:hover,
+.uil-color-grey-600 {
+  color: #5a5e9a;
+}
+.uil-color-grey-500 {
+  color: #777aaf;
+}
+.hover\:uil-color-grey-400:focus,
+.hover\:uil-color-grey-400:hover,
+.uil-color-grey-400 {
+  color: #9698c3;
+}
+.uil-color-grey-300 {
+  color: #b6b7d5;
+}
+.hover\:uil-color-grey-200:focus,
+.hover\:uil-color-grey-200:hover,
+.uil-color-grey-200 {
+  color: #d6d6e7;
+}
+.hover\:uil-color-grey-100:focus,
+.hover\:uil-color-grey-100:hover,
+.uil-color-grey-100 {
+  color: #f5f5fa;
+}
+.uil-color-pink-600 {
+  color: #e90a96;
+}
+.uil-color-nebula-500 {
+  color: #5468ff;
+}
+.uil-color-green-700 {
+  color: #06b66c;
+}
+.uil-color-orange-600 {
+  color: #f78125;
+}
+.uil-color-red-600 {
+  color: #ee243c;
+}
+.uil-color-red-500 {
+  color: #f4495d;
+}
+.uil-color-current {
+  color: currentColor;
+}
+.uil-fill-white {
+  fill: #fff;
+}
+.uil-ai-center {
+  align-items: center;
+}
+.uil-ai-end {
+  align-items: flex-end;
+}
+@media (min-width: 768px) {
+  .sm\:uil-ai-start {
+    align-items: flex-start;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-ai-start {
+    align-items: flex-start;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-ai-center {
+    align-items: center;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-ai-end {
+    align-items: flex-end;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-ai-end {
+    align-items: flex-end;
+  }
+}
+.uil-as-end {
+  align-self: flex-end;
+}
+.uil-fxd-column {
+  flex-direction: column;
+}
+.uil-fxd-row {
+  flex-direction: row;
+}
+@media (min-width: 500px) {
+  .xs\:uil-fxd-row {
+    flex-direction: row;
+  }
+}
+@media (min-width: 768px) {
+  .sm\:uil-fxd-row {
+    flex-direction: row;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-fxd-column {
+    flex-direction: column;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-fxd-row {
+    flex-direction: row;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-fxd-row-reverse {
+    flex-direction: row-reverse;
+  }
+}
+.uil-fxg-0 {
+  flex-grow: 0;
+}
+.uil-fxg-1 {
+  flex-grow: 1;
+}
+@media (min-width: 960px) {
+  .md\:uil-fxg-1 {
+    flex-grow: 1;
+  }
+}
+.uil-fxs-0 {
+  flex-shrink: 0;
+}
+.uil-fxs-1 {
+  flex-shrink: 1;
+}
+.uil-fx-1 {
+  flex: 0 1 8.333333%;
+}
+.uil-fx-4 {
+  flex: 0 1 33.333333%;
+}
+.uil-fx-5 {
+  flex: 0 1 41.666667%;
+}
+.uil-fx-6 {
+  flex: 0 1 50%;
+}
+.uil-fx-12 {
+  flex: 0 1 100%;
+}
+@media (min-width: 960px) {
+  .md\:uil-fx-5 {
+    flex: 0 1 41.666667%;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-fx-6 {
+    flex: 0 1 50%;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-fx-7 {
+    flex: 0 1 58.333333%;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-fx-9 {
+    flex: 0 1 75%;
+  }
+}
+.uil-jc-center {
+  justify-content: center;
+}
+.uil-jc-end {
+  justify-content: flex-end;
+}
+.uil-jc-between {
+  justify-content: space-between;
+}
+.uil-jc-around {
+  justify-content: space-around;
+}
+@media (min-width: 500px) {
+  .xs\:uil-jc-center {
+    justify-content: center;
+  }
+}
+@media (min-width: 768px) {
+  .sm\:uil-jc-start {
+    justify-content: flex-start;
+  }
+}
+@media (min-width: 768px) {
+  .sm\:uil-jc-center {
+    justify-content: center;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-jc-start {
+    justify-content: flex-start;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-jc-center {
+    justify-content: center;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-jc-end {
+    justify-content: flex-end;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-jc-between {
+    justify-content: space-between;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-jc-around {
+    justify-content: space-around;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-jc-end {
+    justify-content: flex-end;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-gcstart-1 {
+    grid-column-start: 1;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-gcstart-2 {
+    grid-column-start: 2;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-gcend-3 {
+    grid-column-end: 3;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-grstart-1 {
+    grid-row-start: 1;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-grstart-2 {
+    grid-row-start: 2;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-grend-3 {
+    grid-row-end: 3;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-grend-4 {
+    grid-row-end: 4;
+  }
+}
+.uil-g-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+@media (min-width: 768px) {
+  .sm\:uil-g-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 768px) {
+  .sm\:uil-g-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+@media (min-width: 768px) {
+  .sm\:uil-g-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+@media (min-width: 768px) {
+  .sm\:uil-g-5 {
+    grid-template-columns: repeat(5, 1fr);
+  }
+}
+@media (min-width: 768px) {
+  .sm\:uil-g-6 {
+    grid-template-columns: repeat(6, 1fr);
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-g-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-g-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-g-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-g-5 {
+    grid-template-columns: repeat(5, 1fr);
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-g-6 {
+    grid-template-columns: repeat(6, 1fr);
+  }
+}
+.uil-ggap-24 {
+  grid-gap: 24px;
+}
+.uil-ggap-48 {
+  grid-gap: 48px;
+}
+@media (min-width: 1200px) {
+  .lg\:uil-ggap-24 {
+    grid-gap: 24px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-ggap-32 {
+    grid-gap: 32px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-ggap-48 {
+    grid-gap: 48px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-ggap-80 {
+    grid-gap: 80px;
+  }
+}
+.uil-gvgap-8 {
+  grid-column-gap: 8px;
+}
+@media (min-width: 768px) {
+  .sm\:uil-gvgap-48 {
+    grid-column-gap: 48px;
+  }
+}
+.uil-ghgap-48 {
+  grid-row-gap: 48px;
+}
+.uil-obf-contain {
+  -o-object-fit: contain;
+  object-fit: contain;
+}
+.uil-obf-cover {
+  -o-object-fit: cover;
+  object-fit: cover;
+}
+.uil-obp-center {
+  -o-object-position: center;
+  object-position: center;
+}
+.uil-bot-0 {
+  bottom: 0;
+}
+.uil-bot-70 {
+  bottom: 70px;
+}
+@media (min-width: 960px) {
+  .md\:uil-bot-0 {
+    bottom: 0;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-fl-right {
+    float: right;
+  }
+}
+.uil-left-0 {
+  left: 0;
+}
+.uil-left-50p {
+  left: 50%;
+}
+@media (min-width: 960px) {
+  .md\:uil-left-0 {
+    left: 0;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-left-50p {
+    left: 50%;
+  }
+}
+.uil-pos-relative {
+  position: relative;
+}
+.uil-pos-absolute {
+  position: absolute;
+}
+.uil-pos-fixed {
+  position: fixed;
+}
+.uil-pos-sticky {
+  position: sticky;
+}
+@media (min-width: 768px) {
+  .sm\:uil-pos-absolute {
+    position: absolute;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-pos-relative {
+    position: relative;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-pos-absolute {
+    position: absolute;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-pos-fixed {
+    position: fixed;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-pos-sticky {
+    position: sticky;
+  }
+}
+.uil-right-0 {
+  right: 0;
+}
+@media (min-width: 960px) {
+  .md\:uil-right-0 {
+    right: 0;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-right-50p {
+    right: 50%;
+  }
+}
+.uil-top-0 {
+  top: 0;
+}
+.uil-top-32 {
+  top: 32px;
+}
+.uil-top-50p {
+  top: 50%;
+}
+@media (min-width: 768px) {
+  .sm\:uil-top-0 {
+    top: 0;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-top-0 {
+    top: 0;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-top-50p {
+    top: 50%;
+  }
+}
+.uil-va-middle {
+  vertical-align: middle;
+}
+.uil-z-1 {
+  z-index: 1;
+}
+.uil-z-2 {
+  z-index: 2;
+}
+.uil-z-3 {
+  z-index: 3;
+}
+.uil-z-4 {
+  z-index: 4;
+}
+.uil-z-5 {
+  z-index: 5;
+}
+.uil-z-max {
+  z-index: 100;
+}
+@media (min-width: 960px) {
+  .md\:uil-z-5 {
+    z-index: 5;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-z-max {
+    z-index: 100;
+  }
+}
+.uil-app-none {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+.uil-bxs-default {
+  box-shadow: 0 5px 15px 0 rgba(37, 44, 97, 0.15),
+    0 2px 4px 0 rgba(93, 100, 148, 0.2);
+}
+.uil-bxs-large {
+  box-shadow: 0 24px 41px 0 rgba(37, 44, 97, 0.13);
+}
+.uil-bxs-none {
+  box-shadow: none;
+}
+@media (min-width: 960px) {
+  .md\:uil-bxs-default {
+    box-shadow: 0 5px 15px 0 rgba(37, 44, 97, 0.15),
+      0 2px 4px 0 rgba(93, 100, 148, 0.2);
+  }
+}
+.uil-cursor-auto {
+  cursor: auto;
+}
+.uil-cursor-pointer {
+  cursor: pointer;
+}
+.uil-cursor-not-allowed {
+  cursor: not-allowed;
+}
+.uil-op-0 {
+  opacity: 0;
+}
+.uil-op-50p {
+  opacity: 0.5;
+}
+.uil-op-40p {
+  opacity: 0.4;
+}
+.uil-op-75p {
+  opacity: 0.75;
+}
+.uil-op-100p {
+  opacity: 1;
+}
+@media (min-width: 960px) {
+  .md\:uil-op-0 {
+    opacity: 0;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-op-25p {
+    opacity: 0.25;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-op-100p {
+    opacity: 1;
+  }
+}
+.uil-pe-auto {
+  pointer-events: auto;
+}
+.uil-pe-none {
+  pointer-events: none;
+}
+@media (min-width: 960px) {
+  .md\:uil-pe-none {
+    pointer-events: none;
+  }
+}
+.uil-us-none {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.uil-h-0 {
+  height: 0;
+}
+.uil-h-10 {
+  height: 10px;
+}
+.uil-h-14 {
+  height: 14px;
+}
+.uil-h-16 {
+  height: 16px;
+}
+.uil-h-18 {
+  height: 18px;
+}
+.uil-h-20 {
+  height: 20px;
+}
+.uil-h-24 {
+  height: 24px;
+}
+.uil-h-25 {
+  height: 25px;
+}
+.uil-h-30 {
+  height: 30px;
+}
+.uil-h-40 {
+  height: 40px;
+}
+.uil-h-50 {
+  height: 50px;
+}
+.uil-h-60 {
+  height: 60px;
+}
+.uil-h-70 {
+  height: 70px;
+}
+.uil-h-80 {
+  height: 80px;
+}
+.uil-h-200 {
+  height: 200px;
+}
+.uil-h-10p {
+  height: 10%;
+}
+.uil-h-20p {
+  height: 20%;
+}
+.uil-h-25p {
+  height: 25%;
+}
+.uil-h-30p {
+  height: 30%;
+}
+.uil-h-40p {
+  height: 40%;
+}
+.uil-h-50p {
+  height: 50%;
+}
+.uil-h-60p {
+  height: 60%;
+}
+.uil-h-70p {
+  height: 70%;
+}
+.uil-h-80p {
+  height: 80%;
+}
+.uil-h-90p {
+  height: 90%;
+}
+.uil-h-100p {
+  height: 100%;
+}
+.uil-h-100vh {
+  height: 100vh;
+}
+.uil-h-auto {
+  height: auto;
+}
+@media (min-width: 960px) {
+  .md\:uil-h-10 {
+    height: 10px;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-h-30 {
+    height: 30px;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-h-60p {
+    height: 60%;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-h-100p {
+    height: 100%;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-h-100vh {
+    height: 100vh;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-h-auto {
+    height: auto;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-h-18 {
+    height: 18px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-h-20 {
+    height: 20px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-h-24 {
+    height: 24px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-h-30 {
+    height: 30px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-h-40 {
+    height: 40px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-h-70 {
+    height: 70px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-h-80 {
+    height: 80px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-h-100 {
+    height: 100px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-h-100p {
+    height: 100%;
+  }
+}
+.uil-mah-100p {
+  max-height: 100%;
+}
+.uil-mah-100vh {
+  max-height: 100vh;
+}
+@media (min-width: 960px) {
+  .md\:uil-mah-100p {
+    max-height: 100%;
+  }
+}
+.uil-maw-500 {
+  max-width: 500px;
+}
+.uil-maw-700 {
+  max-width: 700px;
+}
+.uil-maw-800 {
+  max-width: 800px;
+}
+.uil-maw-1200 {
+  max-width: 1200px;
+}
+.uil-maw-1440 {
+  max-width: 1440px;
+}
+.uil-maw-35ch {
+  max-width: 35ch;
+}
+.uil-maw-100p {
+  max-width: 100%;
+}
+@media (min-width: 960px) {
+  .md\:uil-maw-600 {
+    max-width: 600px;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-maw-900 {
+    max-width: 900px;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-maw-1200 {
+    max-width: 1200px;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-maw-100p {
+    max-width: 100%;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-maw-1200 {
+    max-width: 1200px;
+  }
+}
+.uil-miw-200 {
+  min-width: 200px;
+}
+@media (min-width: 960px) {
+  .md\:uil-miw-300 {
+    min-width: 300px;
+  }
+}
+.uil-w-10 {
+  width: 10px;
+}
+.uil-w-14 {
+  width: 14px;
+}
+.uil-w-16 {
+  width: 16px;
+}
+.uil-w-18 {
+  width: 18px;
+}
+.uil-w-20 {
+  width: 20px;
+}
+.uil-w-25 {
+  width: 25px;
+}
+.uil-w-30 {
+  width: 30px;
+}
+.uil-w-40 {
+  width: 40px;
+}
+.uil-w-50 {
+  width: 50px;
+}
+.uil-w-60 {
+  width: 60px;
+}
+.uil-w-100 {
+  width: 100px;
+}
+.uil-w-200 {
+  width: 200px;
+}
+.uil-w-50p {
+  width: 50%;
+}
+.uil-w-70p {
+  width: 70%;
+}
+.uil-w-80p {
+  width: 80%;
+}
+.uil-w-100p {
+  width: 100%;
+}
+.uil-w-auto {
+  width: auto;
+}
+@media (min-width: 500px) {
+  .xs\:uil-w-60p {
+    width: 60%;
+  }
+}
+@media (min-width: 500px) {
+  .xs\:uil-w-70p {
+    width: 70%;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-w-10 {
+    width: 10px;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-w-30 {
+    width: 30px;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-w-400 {
+    width: 400px;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-w-40p {
+    width: 40%;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-w-50p {
+    width: 50%;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-w-60p {
+    width: 60%;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-w-70p {
+    width: 70%;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-w-100p {
+    width: 100%;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-w-auto {
+    width: auto;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-w-18 {
+    width: 18px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-w-20 {
+    width: 20px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-w-24 {
+    width: 24px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-w-30 {
+    width: 30px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-w-40 {
+    width: 40px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-w-50 {
+    width: 50px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-w-80 {
+    width: 80px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-w-200 {
+    width: 200px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-w-50p {
+    width: 50%;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-w-70p {
+    width: 70%;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-w-80p {
+    width: 80%;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-w-90p {
+    width: 90%;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-w-100p {
+    width: 100%;
+  }
+}
+.uil-ff-hind {
+  font-family: Hind, Arial, sans-serif;
+}
+.uil-ff-poppins {
+  font-family: Poppins, Arial, sans-serif;
+}
+.uil-ff-mono {
+  font-family: SFMono-Regular, Consolas, Andale Mono WT, Andale Mono,
+    Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono,
+    Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Monaco,
+    Courier New, Courier, monospace;
+}
+@media (min-width: 1200px) {
+  .lg\:uil-ff-hind {
+    font-family: Hind, Arial, sans-serif;
+  }
+}
+.uil-fsz-10 {
+  font-size: 10px;
+}
+.uil-fsz-11 {
+  font-size: 11px;
+}
+.uil-fsz-12 {
+  font-size: 12px;
+}
+.uil-fsz-14 {
+  font-size: 14px;
+}
+.uil-fsz-16 {
+  font-size: 16px;
+}
+.uil-fsz-18 {
+  font-size: 18px;
+}
+.uil-fsz-24 {
+  font-size: 24px;
+}
+.uil-fsz-36 {
+  font-size: 36px;
+}
+@media (min-width: 960px) {
+  .md\:uil-fsz-16 {
+    font-size: 16px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-fsz-12 {
+    font-size: 12px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-fsz-14 {
+    font-size: 14px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-fsz-16 {
+    font-size: 16px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-fsz-18 {
+    font-size: 18px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-fsz-24 {
+    font-size: 24px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-fsz-36 {
+    font-size: 36px;
+  }
+}
+@media (min-width: 1200px) {
+  .lg\:uil-fsz-56 {
+    font-size: 56px;
+  }
+}
+.uil-fst-normal {
+  font-style: normal;
+}
+.uil-fw-light {
+  font-weight: 300;
+}
+.uil-fw-normal {
+  font-weight: 400;
+}
+.uil-fw-semibold {
+  font-weight: 600;
+}
+.uil-fw-bold {
+  font-weight: 700;
+}
+.uil-lsp-small {
+  letter-spacing: -1px;
+}
+.uil-lsp-big {
+  letter-spacing: 1.5px;
+}
+.uil-lsp-normal {
+  letter-spacing: normal;
+}
+@media (min-width: 1200px) {
+  .lg\:uil-lsp-medium {
+    letter-spacing: 0.7px;
+  }
+}
+.uil-lh-small {
+  line-height: 1;
+}
+.uil-lh-big {
+  line-height: 1.33;
+}
+.uil-lh-bigger {
+  line-height: 1.78;
+}
+.uil-lis-none {
+  list-style: none;
+}
+.uil-ta-left {
+  text-align: left;
+}
+.uil-ta-center {
+  text-align: center;
+}
+.uil-ta-right {
+  text-align: right;
+}
+@media (min-width: 768px) {
+  .sm\:uil-ta-left {
+    text-align: left;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-ta-left {
+    text-align: left;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-ta-center {
+    text-align: center;
+  }
+}
+@media (min-width: 960px) {
+  .md\:uil-ta-right {
+    text-align: right;
+  }
+}
+.hover\:uil-td-none:focus,
+.hover\:uil-td-none:hover,
+.uil-td-none {
+  text-decoration: none;
+}
+@media (min-width: 960px) {
+  .md\:uil-td-none {
+    text-decoration: none;
+  }
+}
+.uil-to-ellipsis {
+  text-overflow: ellipsis;
+}
+@media (min-width: 1200px) {
+  .lg\:uil-to-ellipsis {
+    text-overflow: ellipsis;
+  }
+}
+.uil-tt-upper {
+  text-transform: uppercase;
+}
+.uil-tt-lower {
+  text-transform: lowercase;
+}
+.uil-ws-nowrap {
+  white-space: nowrap;
+}
+@media (min-width: 1200px) {
+  .lg\:uil-ws-nowrap {
+    white-space: nowrap;
+  }
+}
+.uil-wb-break {
+  word-break: break-word;
+}

docs/src/pages/index.js

@@ -0,0 +1,17 @@
+import Layout from '@theme/Layout';
+import React from 'react';
+
+import Home from '../components/Home';
+
+function HomePage() {
+  return (
+    <Layout
+      title="ShortGPT: Automate Content Creation with AI"
+      description="Automating video and short content creation with AI "
+    >
+      <Home />
+    </Layout>
+  );
+}
+
+export default HomePage;

docs/tailwind.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  purge: ['./src/**/*.html', './src/**/*.js', './src/**/*.tsx'],
+  corePlugins: { preflight: false, container: false },
+  important: '#tailwind',
+  theme: {
+    extend: {
+      maxWidth: {
+        xxs: '18rem',
+      },
+    },
+  },
+};

gui/asset_components.py

@@ -0,0 +1,87 @@
+import os
+import platform
+import subprocess
+
+import gradio as gr
+
+from shortGPT.api_utils.eleven_api import ElevenLabsAPI
+from shortGPT.config.api_db import ApiKeyManager
+from shortGPT.config.asset_db import AssetDatabase
+
+
+class AssetComponentsUtils:
+    EDGE_TTS = "Free EdgeTTS (lower quality)"
+    ELEVEN_TTS = "ElevenLabs(Very High Quality)"
+    instance_background_video_checkbox = None
+    instance_background_music_checkbox = None
+    instance_voiceChoice = None
+    instance_voiceChoiceTranslation = None
+
+    @classmethod
+    def getBackgroundVideoChoices(cls):
+        df = AssetDatabase.get_df()
+        choices = list(df.loc['background video' == df['type']]['name'])[:20]
+        return choices
+
+    @classmethod
+    def getBackgroundMusicChoices(cls):
+        df = AssetDatabase.get_df()
+        choices = list(df.loc['background music' == df['type']]['name'])[:20]
+        return choices
+
+    @classmethod
+    def getElevenlabsVoices(cls):
+        api_key = ApiKeyManager.get_api_key("ELEVEN LABS")
+        voices = list(reversed(ElevenLabsAPI(api_key).get_voices().keys()))
+        return voices
+
+    @classmethod
+    def start_file(cls, path):
+        if platform.system() == "Windows":
+            os.startfile(path)
+        elif platform.system() == "Darwin":
+            subprocess.Popen(["open", path])
+        else:
+            subprocess.Popen(["xdg-open", path])
+
+    @classmethod
+    def background_video_checkbox(cls):
+        if cls.instance_background_video_checkbox is None:
+            cls.instance_background_video_checkbox = gr.CheckboxGroup(
+                choices=cls.getBackgroundVideoChoices(),
+                interactive=True,
+                label="Choose background video",
+            )
+        return cls.instance_background_video_checkbox
+
+    @classmethod
+    def background_music_checkbox(cls):
+        if cls.instance_background_music_checkbox is None:
+            cls.instance_background_music_checkbox = gr.CheckboxGroup(
+                choices=cls.getBackgroundMusicChoices(),
+                interactive=True,
+                label="Choose background music",
+            )
+        return cls.instance_background_music_checkbox
+
+    @classmethod
+    def voiceChoice(cls):
+        if cls.instance_voiceChoice is None:
+            cls.instance_voiceChoice = gr.Radio(
+                cls.getElevenlabsVoices(),
+                label="Elevenlabs voice",
+                value="Antoni",
+                interactive=True,
+            )
+        return cls.instance_voiceChoice
+
+    @classmethod
+    def voiceChoiceTranslation(cls):
+        if cls.instance_voiceChoiceTranslation is None:
+            cls.instance_voiceChoiceTranslation = gr.Radio(
+                cls.getElevenlabsVoices(),
+                label="Elevenlabs voice",
+                value="Antoni",
+                interactive=True,
+            )
+        return cls.instance_voiceChoiceTranslation

gui/asset_library_ui.py

@@ -0,0 +1,114 @@
+"""
+import re
+
+import gradio as gr
+
+from gui.asset_components import (background_music_checkbox,
+                                  background_video_checkbox,
+                                  getBackgroundMusicChoices,
+                                  getBackgroundVideoChoices)
+from gui.ui_abstract_component import AbstractComponentUI
+from shortGPT.config.asset_db import AssetDatabase
+
+
+class AssetLibrary(AbstractComponentUI):
+    def __init__(self):
+        pass
+
+    def create_ui(self):
+        '''Create the asset library UI'''
+        with gr.Tab("Asset library") as asset_library_ui:
+            with gr.Column():
+                with gr.Accordion("Add your own video / audio / image", open=False) as accordion:
+                    with gr.Column(visible=True):
+                        asset_name = gr.Textbox(label="Name (required)")
+                        asset_type = gr.Radio(["background video", "background music"], value="background video", label="Type")
+                        youtube_url = gr.Textbox(label="URL (https://youtube.com/xyz)")
+                        add_youtube_link = gr.Button("ADD")
+                with gr.Row():
+                    with gr.Column(scale=3):
+                        asset_dataframe_ui = gr.Dataframe(self.__fulfill_df, interactive=False)
+                    with gr.Column(scale=2):
+                        gr.Markdown("Preview")
+                        asset_preview_ui = gr.HTML(self.__get_first_preview)
+                        delete_button = gr.Button("🗑️ Delete", scale=0, variant="primary")
+                        delete_button.click(self.__delete_clicked, [delete_button], [asset_dataframe_ui, asset_preview_ui, delete_button, background_video_checkbox, background_music_checkbox])
+                        asset_dataframe_ui.select(self.__preview_asset, [asset_dataframe_ui], [asset_preview_ui, delete_button])
+                add_youtube_link.click(
+                    self.__verify_youtube_asset_inputs, [asset_name, youtube_url, asset_type], []).success(self.__add_youtube_asset, [asset_name, youtube_url, asset_type], [asset_dataframe_ui, asset_preview_ui, delete_button, accordion, background_video_checkbox, background_music_checkbox])
+        return asset_library_ui
+
+    def __fulfill_df(self):
+        '''Get the asset dataframe'''
+        return AssetDatabase.get_df()
+
+    def __verify_youtube_asset_inputs(self, asset_name, yt_url, type):
+        if not asset_name or not re.match("^[A-Za-z0-9 _-]*$", asset_name):
+            raise gr.Error('Invalid asset name. Please provide a valid name that you will recognize (Only use letters and numbers)')
+        if not yt_url.startswith("https://youtube.com/") and not yt_url.startswith("https://www.youtube.com/"):
+            raise gr.Error('Invalid YouTube URL. Please provide a valid URL.')
+        if AssetDatabase.asset_exists(asset_name):
+            raise gr.Error('An asset already exists with this name, please choose a different name.')
+
+    def __add_youtube_asset(self, asset_name, yt_url, type):
+        '''Add a youtube asset'''
+        AssetDatabase.add_remote_asset(asset_name, type, yt_url)
+        latest_df = AssetDatabase.get_df()
+        return gr.DataFrame.update(value=latest_df), gr.HTML.update(value=self.__get_asset_embed(latest_df, 0)),\
+            gr.update(value=f"🗑️ Delete {latest_df.iloc[0]['name']}"),\
+            gr.Accordion.update(open=False),\
+            gr.CheckboxGroup.update(choices=getBackgroundVideoChoices(), interactive=True),\
+            gr.CheckboxGroup.update(choices=getBackgroundMusicChoices(), interactive=True)
+
+    def __get_first_preview(self):
+        '''Get the first preview'''
+        return self.__get_asset_embed(AssetDatabase.get_df(), 0)
+
+    def __delete_clicked(self, button_name):
+        '''Delete an asset'''
+        asset_name = button_name.split("🗑️ Delete ")[-1]
+        AssetDatabase.remove_asset(asset_name)
+        data = AssetDatabase.get_df()
+        if len(data) > 0:
+            return gr.update(value=data),\
+                gr.HTML.update(value=self.__get_asset_embed(data, 0)),\
+                gr.update(value=f"🗑️ Delete {data.iloc[0]['name']}"),\
+                gr.CheckboxGroup.update(choices=getBackgroundVideoChoices(), interactive=True),\
+                gr.CheckboxGroup.update(choices=getBackgroundMusicChoices(), interactive=True)
+        return gr.Dataframe.update(value=data),\
+            gr.HTML.update(visible=True),\
+            gr.Button.update(value="🗑️ Delete"),\
+            gr.CheckboxGroup.update(choices=getBackgroundVideoChoices(), interactive=True),\
+            gr.CheckboxGroup.update(choices=getBackgroundMusicChoices(), interactive=True)
+
+    def __preview_asset(self, data, evt: gr.SelectData):
+        '''Preview an asset'''
+        html_embed = self.__get_asset_embed(data, evt.index[0])
+        return gr.HTML.update(value=html_embed), gr.update(value=f"🗑️ Delete {data.iloc[evt.index[0]]['name']}")
+
+    def __get_asset_embed(self, data, row):
+        '''Get the asset embed'''
+        embed_height = 300
+        embed_width = 300
+        asset_link = data.iloc[row]['link']
+
+        if 'youtube.com' in asset_link:
+            asset_link = f"https://youtube.com/embed/{asset_link.split('?v=')[-1]}"
+            embed_html = f'<iframe width="{embed_width}" height="{embed_height}" src="{asset_link}"></iframe>'
+        elif 'public/' in asset_link:
+            asset_link = f"http://localhost:31415/file={asset_link}"
+            file_ext = asset_link.split('.')[-1]
+
+            if file_ext in ['mp3', 'wav', 'ogg']:
+                audio_type = 'audio/mpeg' if file_ext == 'mp3' else f'audio/{file_ext}'
+                embed_html = f'<audio controls><source src="{asset_link}" type="{audio_type}">Your browser does not support the audio tag.</audio>'
+            elif file_ext in ['mp4', 'webm', 'ogg', 'mov']:
+                video_type = 'video/mp4' if file_ext == 'mp4' else f'video/{file_ext}'
+                embed_html = f'<video width="{embed_width}" height="{embed_height}" style="max-height: 100%;" controls><source src="{asset_link}" type="{video_type}">Your browser does not support the video tag.</video>'
+            elif file_ext in ['jpg', 'jpeg', 'png', 'gif']:
+                embed_html = f'<img src="{asset_link}" width="{embed_width}" height="{embed_height}">'
+            else:
+                embed_html = 'Unsupported file type'
+        return embed_html
+
+"""

gui/content_automation_ui.py

@@ -0,0 +1,24 @@
+import gradio as gr
+
+from gui.ui_tab_short_automation import ShortAutomationUI
+from gui.ui_tab_video_automation import VideoAutomationUI
+from gui.ui_tab_video_translation import VideoTranslationUI
+
+
+class GradioContentAutomationUI:
+    def __init__(self, shortGPTUI):
+        self.shortGPTUI = shortGPTUI
+        self.content_automation_ui = None
+
+    def create_ui(self):
+        '''Create Gradio interface'''
+        with gr.Tab("Content Automation") as self.content_automation_ui:
+            gr.Markdown("# 🏆 Content Automation 🚀")
+            gr.Markdown("## Choose your desired automation task.")
+            choice = gr.Radio(['🎬 Automate the creation of shorts', '🎞️ Automate a video with stock assets', '🌐 Automate multilingual video dubbing'], label="Choose an option")
+            video_automation_ui = VideoAutomationUI(self.shortGPTUI).create_ui()
+            short_automation_ui = ShortAutomationUI(self.shortGPTUI).create_ui()
+            video_translation_ui = VideoTranslationUI(self.shortGPTUI).create_ui()
+            choice.change(lambda x: (gr.update(visible=x == choice.choices[1]), gr.update(visible=x == choice.choices[0]), gr.update(
+                visible=x == choice.choices[2])), [choice], [video_automation_ui, short_automation_ui, video_translation_ui])
+        return self.content_automation_ui

gui/gui_gradio.py

@@ -0,0 +1,38 @@
+import gradio as gr
+
+from gui.content_automation_ui import GradioContentAutomationUI
+from gui.ui_abstract_base import AbstractBaseUI
+from gui.ui_components_html import GradioComponentsHTML
+from gui.ui_tab_asset_library import AssetLibrary
+from gui.ui_tab_config import ConfigUI
+from shortGPT.utils.cli import CLI
+
+
+class ShortGptUI(AbstractBaseUI):
+    '''Class for the GUI. This class is responsible for creating the UI and launching the server.'''
+
+    def __init__(self, colab=False):
+        super().__init__(ui_name='gradio_shortgpt')
+        self.colab = colab
+        CLI.display_header()
+
+    def create_interface(self):
+        '''Create Gradio interface'''
+        with gr.Blocks(css="footer {visibility: hidden}", title="ShortGPT Demo") as shortGptUI:
+            with gr.Row(variant='compact'):
+                gr.HTML(GradioComponentsHTML.get_html_header())
+
+            self.content_automation = GradioContentAutomationUI(shortGptUI).create_ui()
+            self.asset_library_ui = AssetLibrary().create_ui()
+            self.config_ui = ConfigUI().create_ui()
+        return shortGptUI
+
+    def launch(self):
+        '''Launch the server'''
+        shortGptUI = self.create_interface()
+        shortGptUI.queue(concurrency_count=5, max_size=20).launch(server_port=31415, height=1000, share=self.colab)
+
+
+if __name__ == "__main__":
+    app = ShortGptUI()
+    app.launch()

gui/ui_abstract_base.py

@@ -0,0 +1,19 @@
+
+import gradio as gr
+
+
+class AbstractBaseUI:
+    '''Base class for the GUI. This class is responsible for creating the UI and launching the server.'''
+    max_choices = 20
+    ui_asset_dataframe = gr.Dataframe(interactive=False)
+    LOGO_PATH = "http://localhost:31415/file=public/logo.png"
+    LOGO_DIM = 64
+
+    def __init__(self, ui_name='default'):
+        self.ui_name = ui_name
+        self.content_automation = None
+        self.asset_library_ui = None
+        self.config_ui = None
+
+    def create_interface(self):
+        raise NotImplementedError

gui/ui_abstract_component.py

@@ -0,0 +1,5 @@
+
+
+class AbstractComponentUI:
+    def create_ui(self):
+        raise NotImplementedError

gui/ui_components_html.py

@@ -0,0 +1,56 @@
+class GradioComponentsHTML:
+
+    @staticmethod
+    def get_html_header() -> str:
+        '''Create HTML for the header'''
+        return '''
+            <div style="display: flex; justify-content: space-between; align-items: center; padding: 5px;">
+            <h1 style="margin-left: 0px; font-size: 35px;">ShortGPT</h1>
+            <div style="flex-grow: 1; text-align: right;">
+                <a href="https://discord.gg/uERx39ru3R" target="_blank" style="text-decoration: none;">
+                <button style="margin-right: 10px; padding: 10px 20px; font-size: 16px; color: #fff; background-color: #7289DA; border: none; border-radius: 5px; cursor: pointer;">Join Discord</button>
+                </a>
+                <a href="https://github.com/RayVentura/ShortGPT" target="_blank" style="text-decoration: none;">
+                <button style="padding: 10px 20px; font-size: 16px; color: #fff; background-color: #333; border: none; border-radius: 5px; cursor: pointer;">Add a Star on Github ⭐</button>
+                </a>
+            </div>
+            </div>
+        '''
+
+    @staticmethod
+    def get_html_error_template() -> str:
+        return '''
+        <div style='text-align: center; background: #f2dede; color: #a94442; padding: 20px; border-radius: 5px; margin: 10px;'>
+          <h2 style='margin: 0;'>ERROR : {error_message}</h2>
+          <p style='margin: 10px 0;'>Traceback Info : {stack_trace}</p>
+          <p style='margin: 10px 0;'>If the problem persists, don't hesitate to contact our support. We're here to assist you.</p>
+          <a href='https://discord.gg/qn2WJaRH' target='_blank' style='background: #a94442; color: #fff; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; text-decoration: none;'>Get Help on Discord</a>
+        </div>
+        '''
+
+    @staticmethod
+    def get_html_video_template(file_url_path, file_name, width="auto", height="auto"):
+        """
+        Generate an HTML code snippet for embedding and downloading a video.
+
+        Parameters:
+        file_url_path (str): The URL or path to the video file.
+        file_name (str): The name of the video file.
+        width (str, optional): The width of the video. Defaults to "auto".
+        height (str, optional): The height of the video. Defaults to "auto".
+
+        Returns:
+        str: The generated HTML code snippet.
+        """
+        html = f'''
+            <div style="display: flex; flex-direction: column; align-items: center;">
+                <video width="{width}" height="{height}" style="max-height: 100%;" controls>
+                    <source src="{file_url_path}" type="video/mp4">
+                    Your browser does not support the video tag.
+                </video>
+                <a href="{file_url_path}" download="{file_name}" style="margin-top: 10px;">
+                    <button style="font-size: 1em; padding: 10px; border: none; cursor: pointer; color: white; background: #007bff;">Download Video</button>
+                </a>
+            </div>
+        '''
+        return html

gui/ui_tab_asset_library.py

@@ -0,0 +1,197 @@
+import os
+import re
+import shutil
+
+import gradio as gr
+
+from gui.asset_components import AssetComponentsUtils
+from gui.ui_abstract_component import AbstractComponentUI
+from shortGPT.config.asset_db import AssetDatabase, AssetType
+
+
+class AssetLibrary(AbstractComponentUI):
+    def __init__(self):
+        pass
+
+    def create_ui(self):
+        '''Create the asset library UI'''
+        with gr.Tab("Asset library") as asset_library_ui:
+            with gr.Column():
+                with gr.Accordion("➕ Add your own local assets or from Youtube", open=False) as accordion:
+                    remote = "Add youtube video / audio"
+                    local = "Add local video / audio / image    "
+                    assetFlows = gr.Radio([remote, local], label="", value=remote)
+                    with gr.Column(visible=True) as youtubeFlow:
+                        asset_name = gr.Textbox(label="Name (required)")
+                        asset_type = gr.Radio([AssetType.BACKGROUND_VIDEO.value, AssetType.BACKGROUND_MUSIC.value,], value=AssetType.BACKGROUND_VIDEO.value, label="Type")
+                        youtube_url = gr.Textbox(label="URL (https://youtube.com/xyz)")
+                        add_youtube_link = gr.Button("ADD")
+
+                    with gr.Column(visible=False) as localFileFlow:
+                        local_upload_name = gr.Textbox(label="Name (required)")
+                        upload_type = gr.Radio([AssetType.BACKGROUND_VIDEO.value, AssetType.BACKGROUND_MUSIC.value, AssetType.IMAGE.value], value="background video", interactive=True, label="Type")
+                        video_upload = gr.Video(visible=True, source="upload", type="filepath", interactive=True)
+                        audio_upload = gr.Audio(visible=False, source="upload", type="filepath", interactive=True)
+                        image_upload = gr.Image(visible=False, source="upload", type="filepath", interactive=True)
+                        upload_button = gr.Button("ADD")
+                        upload_type.change(lambda x: (gr.update(visible='video' in x),
+                                                      gr.update(visible=any(type in x for type in ['audio', 'music'])),
+                                                      gr.update(visible=x == 'image')),
+                                           [upload_type], [video_upload, audio_upload, image_upload])
+                    assetFlows.change(lambda x: (gr.update(visible=x == remote), gr.update(visible=x == local)), [assetFlows], [youtubeFlow, localFileFlow])
+                with gr.Row():
+                    with gr.Column(scale=3):
+                        asset_dataframe_ui = gr.Dataframe(self.__fulfill_df, interactive=False)
+                        video_choise = gr.Radio(["background video", "background music"], value="background video", label="Type")
+                    with gr.Column(scale=2):
+                        gr.Markdown("Preview")
+                        asset_preview_ui = gr.HTML(self.__get_first_preview)
+                        delete_button = gr.Button("🗑️ Delete", scale=0, variant="primary")
+                        delete_button.click(self.__delete_clicked, [delete_button], [asset_dataframe_ui, asset_preview_ui, delete_button, AssetComponentsUtils.background_video_checkbox(), AssetComponentsUtils.background_music_checkbox()])
+                        asset_dataframe_ui.select(self.__preview_asset, [asset_dataframe_ui], [asset_preview_ui, delete_button])
+
+                add_youtube_link.click(
+                    self.__verify_youtube_asset_inputs, [asset_name, youtube_url, asset_type], []).success(self.__add_youtube_asset, [asset_name, youtube_url, asset_type], [asset_dataframe_ui, asset_preview_ui, delete_button, accordion, AssetComponentsUtils.background_video_checkbox(), AssetComponentsUtils.background_music_checkbox()]).success(lambda: gr.update(open=False), [accordion])
+
+                upload_button.click(
+                    self.__verify_and_upload_local_asset, [upload_type, local_upload_name, video_upload, audio_upload, image_upload, ], []).success(self.__upload_local_asset, [upload_type, local_upload_name, video_upload, audio_upload, image_upload, ], [asset_dataframe_ui, asset_preview_ui, delete_button, accordion, AssetComponentsUtils.background_video_checkbox(), AssetComponentsUtils.background_music_checkbox()]).success(lambda: gr.update(open=False), [accordion])
+
+        return asset_library_ui
+
+    def __fulfill_df(self):
+        '''Get the dataframe of assets'''
+        return AssetDatabase.get_df()
+
+    def __verify_youtube_asset_inputs(self, asset_name, yt_url, type):
+        if not asset_name or not re.match("^[A-Za-z0-9 _-]*$", asset_name):
+            raise gr.Error('Invalid asset name. Please provide a valid name that you will recognize (Only use letters and numbers)')
+        if not yt_url.startswith("https://youtube.com/") and not yt_url.startswith("https://www.youtube.com/"):
+            raise gr.Error('Invalid YouTube URL. Please provide a valid URL.')
+        if AssetDatabase.asset_exists(asset_name):
+            raise gr.Error('An asset already exists with this name, please choose a different name.')
+
+    def __validate_asset_name(self, asset_name):
+        '''Validate asset name'''
+        if not asset_name or not re.match("^[A-Za-z0-9 _-]*$", asset_name):
+            raise gr.Error('Invalid asset name. Please provide a valid name that you will recognize (Only use letters and numbers)')
+        if AssetDatabase.asset_exists(asset_name):
+            raise gr.Error('An asset already exists with this name, please choose a different name.')
+
+    def __validate_youtube_url(self, yt_url):
+        '''Validate YouTube URL'''
+        if not yt_url.startswith("https://youtube.com/") and not yt_url.startswith("https://www.youtube.com/"):
+            raise gr.Error('Invalid YouTube URL. Please provide a valid URL.')
+
+    def __verify_and_add_youtube_asset(self, asset_name, yt_url, type):
+        '''Verify and add a youtube asset to the database'''
+        self.__validate_asset_name(asset_name)
+        self.__validate_youtube_url(yt_url)
+        return self.__add_youtube_asset(asset_name, yt_url, type)
+
+    def __add_youtube_asset(self, asset_name, yt_url, type):
+        '''Add a youtube asset'''
+        AssetDatabase.add_remote_asset(asset_name, AssetType(type), yt_url)
+        latest_df = AssetDatabase.get_df()
+        return gr.DataFrame.update(value=latest_df), gr.HTML.update(value=self.__get_asset_embed(latest_df, 0)),\
+            gr.update(value=f"🗑️ Delete {latest_df.iloc[0]['name']}"),\
+            gr.Accordion.update(open=False),\
+            gr.CheckboxGroup.update(choices=AssetComponentsUtils.getBackgroundVideoChoices(), interactive=True),\
+            gr.CheckboxGroup.update(choices=AssetComponentsUtils.getBackgroundMusicChoices(), interactive=True)
+
+    def __get_first_preview(self):
+        '''Get the first preview'''
+        return self.__get_asset_embed(AssetDatabase.get_df(), 0)
+
+    def __delete_clicked(self, button_name):
+        '''Delete an asset'''
+        asset_name = button_name.split("🗑️ Delete ")[-1]
+        AssetDatabase.remove_asset(asset_name)
+        data = AssetDatabase.get_df()
+        if len(data) > 0:
+            return gr.update(value=data),\
+                gr.HTML.update(value=self.__get_asset_embed(data, 0)),\
+                gr.update(value=f"🗑️ Delete {data.iloc[0]['name']}"),\
+                gr.CheckboxGroup.update(choices=AssetComponentsUtils.getBackgroundVideoChoices(), interactive=True),\
+                gr.CheckboxGroup.update(choices=AssetComponentsUtils.getBackgroundMusicChoices(), interactive=True)
+        return gr.Dataframe.update(value=data),\
+            gr.HTML.update(visible=True),\
+            gr.Button.update(value="🗑️ Delete"),\
+            gr.CheckboxGroup.update(choices=AssetComponentsUtils.getBackgroundVideoChoices(), interactive=True),\
+            gr.CheckboxGroup.update(choices=AssetComponentsUtils.getBackgroundMusicChoices(), interactive=True)
+
+    def __preview_asset(self, data, evt: gr.SelectData):
+        '''Preview the asset with the given name'''
+        html_embed = self.__get_asset_embed(data, evt.index[0])
+        return gr.HTML.update(value=html_embed), gr.update(value=f"🗑️ Delete {data.iloc[evt.index[0]]['name']}")
+
+    def __get_asset_embed(self, data, row):
+        '''Get the embed html for the asset at the given row'''
+        embed_height = 300
+        embed_width = 300
+        asset_link = data.iloc[row]['link']
+
+        if 'youtube.com' in asset_link:
+            asset_link_split = asset_link.split('?v=')
+            if asset_link_split[0] == asset_link:
+                asset_link_split = asset_link.split('/')
+                # if the last character is a /, remove it
+                if asset_link_split[-1] == '/':
+                    asset_link_split = asset_link_split[:-1]
+                asset_link_split = asset_link_split[-1]
+            else:
+                asset_link_split = asset_link_split[-1]
+            asset_link = f"https://youtube.com/embed/{asset_link_split}"
+            embed_html = f'<iframe width="{embed_width}" height="{embed_height}" src="{asset_link}"></iframe>'
+        elif 'public/' in asset_link:
+            asset_link = f"http://localhost:31415/file={asset_link}"
+            file_ext = asset_link.split('.')[-1]
+
+            if file_ext in ['mp3', 'wav', 'ogg']:
+                audio_type = 'audio/mpeg' if file_ext == 'mp3' else f'audio/{file_ext}'
+                embed_html = f'<audio controls><source src="{asset_link}" type="{audio_type}">Your browser does not support the audio tag.</audio>'
+            elif file_ext in ['mp4', 'webm', 'ogg', 'mov']:
+                video_type = 'video/mp4' if file_ext == 'mp4' else f'video/{file_ext}'
+                embed_html = f'<video width="{embed_width}" height="{embed_height}" style="max-height: 100%;" controls><source src="{asset_link}" type="{video_type}">Your browser does not support the video tag.</video>'
+            elif file_ext in ['jpg', 'jpeg', 'png', 'gif']:
+                embed_html = f'<img src="{asset_link}" width="{embed_width}" height="{embed_height}">'
+            else:
+                embed_html = 'Unsupported file type'
+        return embed_html
+
+    @staticmethod
+    def __clean_filename(filename):
+        '''Clean the filename'''
+        return re.sub('[\\\\/:*?"<>|]', '', filename)
+
+    def __verify_and_upload_local_asset(self, upload_type, upload_name, video_path, audio_path, image_path):
+        '''Verify and upload a local asset to the database'''
+        self.__validate_asset_name(upload_name)
+        path_dict = {
+            AssetType.VIDEO.value: video_path,
+            AssetType.BACKGROUND_VIDEO.value: video_path,
+            AssetType.AUDIO.value: audio_path,
+            AssetType.BACKGROUND_MUSIC.value: audio_path,
+            AssetType.IMAGE.value: image_path
+        }
+        if not os.path.exists(path_dict[upload_type]):
+            raise gr.Error(f'The file does not exist at the given path.')
+        return self.__upload_local_asset(upload_type, upload_name, video_path, audio_path, image_path)
+
+    def __upload_local_asset(self, upload_type, upload_name, video_path, audio_path, image_path):
+        '''Upload a local asset to the database'''
+        path_dict = {
+            AssetType.VIDEO.value: video_path,
+            AssetType.BACKGROUND_VIDEO.value: video_path,
+            AssetType.AUDIO.value: audio_path,
+            AssetType.BACKGROUND_MUSIC.value: audio_path,
+            AssetType.IMAGE.value: image_path
+        }
+        new_path = "public/" + self.__clean_filename(upload_name) + "." + path_dict[upload_type].split(".")[-1]
+        shutil.move(path_dict[upload_type], new_path)
+        AssetDatabase.add_local_asset(upload_name, AssetType(upload_type), new_path)
+        latest_df = AssetDatabase.get_df()
+        return gr.DataFrame.update(value=latest_df), gr.HTML.update(value=self.__get_asset_embed(latest_df, 0)),\
+            gr.update(value=f"🗑️ Delete {latest_df.iloc[0]['name']}"),\
+            gr.Accordion.update(open=False),\
+            gr.CheckboxGroup.update(choices=AssetComponentsUtils.getBackgroundVideoChoices(), interactive=True),\
+            gr.CheckboxGroup.update(choices=AssetComponentsUtils.getBackgroundMusicChoices(), interactive=True)

gui/ui_tab_config.py

@@ -0,0 +1,92 @@
+import time
+
+import gradio as gr
+
+from gui.asset_components import AssetComponentsUtils
+from gui.ui_abstract_component import AbstractComponentUI
+from shortGPT.api_utils.eleven_api import ElevenLabsAPI
+from shortGPT.config.api_db import ApiKeyManager
+
+
+class ConfigUI(AbstractComponentUI):
+    def __init__(self):
+        self.api_key_manager = ApiKeyManager()
+        eleven_key = self.api_key_manager.get_api_key('ELEVEN LABS')
+        self.eleven_labs_api = ElevenLabsAPI(eleven_key) if eleven_key else None
+
+    def on_show(self, button_text, textbox, button):
+        '''Show or hide the API key'''
+        if button_text == "Show":
+            return gr.Textbox.update(type="text"), gr.Button.update(value="Hide")
+        return gr.Textbox.update(type="password"), gr.Button.update(value="Show")
+
+    def verify_eleven_key(self, eleven_key, remaining_chars):
+        '''Verify the ElevenLabs API key'''
+        if (eleven_key and self.api_key_manager.get_api_key('ELEVEN LABS') != eleven_key):
+            try:
+                self.eleven_labs_api = ElevenLabsAPI(eleven_key)
+                print(self.eleven_labs_api)
+                return self.eleven_labs_api.get_remaining_characters()
+            except Exception as e:
+                raise gr.Error(e.args[0])
+        return remaining_chars
+
+    def save_keys(self, openai_key, eleven_key, pexels_key):
+        '''Save the keys in the database'''
+        if (self.api_key_manager.get_api_key('OPENAI') != openai_key):
+            self.api_key_manager.set_api_key("OPENAI", openai_key)
+        if (self.api_key_manager.get_api_key('PEXELS') != pexels_key):
+            self.api_key_manager.set_api_key("PEXELS", pexels_key)
+        if (self.api_key_manager.get_api_key('ELEVEN LABS') != eleven_key):
+            self.api_key_manager.set_api_key("ELEVEN LABS", eleven_key)
+            new_eleven_voices = AssetComponentsUtils.getElevenlabsVoices()
+            return gr.Textbox.update(value=openai_key),\
+                gr.Textbox.update(value=eleven_key),\
+                gr.Textbox.update(value=pexels_key),\
+                gr.Radio.update(choices=new_eleven_voices),\
+                gr.Radio.update(choices=new_eleven_voices)
+
+        return gr.Textbox.update(value=openai_key),\
+            gr.Textbox.update(value=eleven_key),\
+            gr.Textbox.update(value=pexels_key),\
+            gr.Radio.update(visible=True),\
+            gr.Radio.update(visible=True)
+
+    def get_eleven_remaining(self,):
+        '''Get the remaining characters from ElevenLabs API'''
+        if (self.eleven_labs_api):
+            try:
+                return self.eleven_labs_api.get_remaining_characters()
+            except Exception as e:
+                return e.args[0]
+        return ""
+
+    def back_to_normal(self):
+        '''Back to normal after 3 seconds'''
+        time.sleep(3)
+        return gr.Button.update(value="save")
+
+    def create_ui(self):
+        '''Create the config UI'''
+        with gr.Tab("Config") as config_ui:
+            with gr.Row():
+                with gr.Column():
+                    with gr.Row():
+                        openai_textbox = gr.Textbox(value=self.api_key_manager.get_api_key("OPENAI"), label=f"OPENAI API KEY", show_label=True, interactive=True, show_copy_button=True, type="password", scale=40)
+                        show_openai_key = gr.Button("Show", size="sm", scale=1)
+                        show_openai_key.click(self.on_show, [show_openai_key], [openai_textbox, show_openai_key])
+                    with gr.Row():
+                        eleven_labs_textbox = gr.Textbox(value=self.api_key_manager.get_api_key("ELEVEN LABS"), label=f"ELEVEN LABS API KEY", show_label=True, interactive=True, show_copy_button=True, type="password", scale=40)
+                        eleven_characters_remaining = gr.Textbox(value=self.get_eleven_remaining(), label=f"CHARACTERS REMAINING", show_label=True, interactive=False, type="text", scale=40)
+                        show_eleven_key = gr.Button("Show", size="sm", scale=1)
+                        show_eleven_key.click(self.on_show, [show_eleven_key], [eleven_labs_textbox, show_eleven_key])
+                    with gr.Row():
+                        pexels_textbox = gr.Textbox(value=self.api_key_manager.get_api_key("PEXELS"), label=f"PEXELS KEY", show_label=True, interactive=True, show_copy_button=True, type="password", scale=40)
+                        show_pexels_key = gr.Button("Show", size="sm", scale=1)
+                        show_pexels_key.click(self.on_show, [show_pexels_key], [pexels_textbox, show_pexels_key])
+                    save_button = gr.Button("save", size="sm", scale=1)
+                    save_button.click(self.verify_eleven_key, [eleven_labs_textbox, eleven_characters_remaining], [eleven_characters_remaining]).success(
+                        self.save_keys, [openai_textbox, eleven_labs_textbox, pexels_textbox], [openai_textbox, eleven_labs_textbox, pexels_textbox, AssetComponentsUtils.voiceChoice(), AssetComponentsUtils.voiceChoiceTranslation()])
+                    save_button.click(lambda _: gr.Button.update(value="Keys Saved !"), [], [save_button])
+                    save_button.click(self.back_to_normal, [], [save_button])
+        return config_ui