├── .github
    └── workflows
    │   ├── accelerate_doc.yml
    │   ├── build_main_documentation.yml
    │   ├── build_pr_documentation.yml
    │   ├── delete_old_pr_documentations.yml
    │   ├── lint-svelte-kit.yml
    │   ├── quality.yml
    │   ├── test.yml
    │   └── upload_pr_documentation.yml
├── .gitignore
├── LICENSE
├── MANIFEST.in
├── Makefile
├── README.md
├── kit
    ├── .eslintignore
    ├── .eslintrc.cjs
    ├── .gitignore
    ├── .npmrc
    ├── .prettierignore
    ├── .prettierrc
    ├── package-lock.json
    ├── package.json
    ├── postbuild.sh
    ├── postcss.config.cjs
    ├── postprocess.js
    ├── preprocessors
    │   ├── docstring.js
    │   ├── frameworkcontent.js
    │   ├── hashInCode.js
    │   ├── hfOptions.js
    │   ├── index.js
    │   ├── inferenceSnippet.js
    │   ├── mdsvex
    │   │   └── index.js
    │   ├── tokenizersLang.js
    │   └── utils.js
    ├── src
    │   ├── app.css
    │   ├── app.d.ts
    │   ├── app.html
    │   ├── lib
    │   │   ├── Added.svelte
    │   │   ├── Changed.svelte
    │   │   ├── CodeBlock.svelte
    │   │   ├── CodeBlockFw.svelte
    │   │   ├── ColabDropdown.svelte
    │   │   ├── CopyButton.svelte
    │   │   ├── CourseFloatingBanner.svelte
    │   │   ├── Deprecated.svelte
    │   │   ├── DocNotebookDropdown.svelte
    │   │   ├── Docstring.svelte
    │   │   ├── Dropdown.svelte
    │   │   ├── DropdownEntry.svelte
    │   │   ├── DropdownMenu.svelte
    │   │   ├── EditOnGithub.svelte
    │   │   ├── ExampleCodeBlock.svelte
    │   │   ├── FrameworkContent.svelte
    │   │   ├── FrameworkContentBlock.svelte
    │   │   ├── FrameworkSwitch.svelte
    │   │   ├── FrameworkSwitchCourse.svelte
    │   │   ├── Heading.svelte
    │   │   ├── HfOption.svelte
    │   │   ├── HfOptions.svelte
    │   │   ├── IconCaretDown.svelte
    │   │   ├── IconCopy.svelte
    │   │   ├── IconCopyLink.svelte
    │   │   ├── IconCurl.svelte
    │   │   ├── IconEyeHide.svelte
    │   │   ├── IconEyeShow.svelte
    │   │   ├── IconJax.svelte
    │   │   ├── IconJs.svelte
    │   │   ├── IconNode.svelte
    │   │   ├── IconPython.svelte
    │   │   ├── IconPytorch.svelte
    │   │   ├── IconRust.svelte
    │   │   ├── IconTensorflow.svelte
    │   │   ├── InferenceApi.svelte
    │   │   ├── InferenceSnippet
    │   │   │   ├── IconInferenceBlackForest.svelte
    │   │   │   ├── IconInferenceCerebras.svelte
    │   │   │   ├── IconInferenceCohere.svelte
    │   │   │   ├── IconInferenceFal.svelte
    │   │   │   ├── IconInferenceFeatherless.svelte
    │   │   │   ├── IconInferenceFireworks.svelte
    │   │   │   ├── IconInferenceGroq.svelte
    │   │   │   ├── IconInferenceHf.svelte
    │   │   │   ├── IconInferenceHyperbolic.svelte
    │   │   │   ├── IconInferenceNebius.svelte
    │   │   │   ├── IconInferenceNovita.svelte
    │   │   │   ├── IconInferenceNscale.svelte
    │   │   │   ├── IconInferenceReplicate.svelte
    │   │   │   ├── IconInferenceSambaNova.svelte
    │   │   │   ├── IconInferenceTogetherAI.svelte
    │   │   │   ├── IconLinkExternal.svelte
    │   │   │   ├── IconSettings.svelte
    │   │   │   └── InferenceSnippet.svelte
    │   │   ├── Markdown.svelte
    │   │   ├── PipelineIcon.svelte
    │   │   ├── PipelineIcons
    │   │   │   ├── IconAudioClassification.svelte
    │   │   │   ├── IconAudioToAudio.svelte
    │   │   │   ├── IconAutomaticSpeechRecognition.svelte
    │   │   │   ├── IconConversational.svelte
    │   │   │   ├── IconDocumentQuestionAnswering.svelte
    │   │   │   ├── IconFeatureExtraction.svelte
    │   │   │   ├── IconFillMask.svelte
    │   │   │   ├── IconImageClassification.svelte
    │   │   │   ├── IconImageSegmentation.svelte
    │   │   │   ├── IconImageToImage.svelte
    │   │   │   ├── IconImageToText.svelte
    │   │   │   ├── IconObjectDetection.svelte
    │   │   │   ├── IconQuestionAnswering.svelte
    │   │   │   ├── IconReinforcementLearning.svelte
    │   │   │   ├── IconRobotics.svelte
    │   │   │   ├── IconSentenceSimilarity.svelte
    │   │   │   ├── IconSummarization.svelte
    │   │   │   ├── IconTableQuestionAnswering.svelte
    │   │   │   ├── IconTabularClassification.svelte
    │   │   │   ├── IconTabularRegression.svelte
    │   │   │   ├── IconText2textGeneration.svelte
    │   │   │   ├── IconTextClassification.svelte
    │   │   │   ├── IconTextGeneration.svelte
    │   │   │   ├── IconTextToImage.svelte
    │   │   │   ├── IconTextToSpeech.svelte
    │   │   │   ├── IconTokenClassification.svelte
    │   │   │   ├── IconTranslation.svelte
    │   │   │   ├── IconUnconditionalImageGeneration.svelte
    │   │   │   ├── IconVoiceActivityDetection.svelte
    │   │   │   └── IconZeroShotClassification.svelte
    │   │   ├── PipelineTag.svelte
    │   │   ├── Question.svelte
    │   │   ├── Tip.svelte
    │   │   ├── TokenizersLanguageContent.svelte
    │   │   ├── Tooltip.svelte
    │   │   ├── TooltipFromAction.svelte
    │   │   ├── Youtube.svelte
    │   │   ├── copyToClipboard.ts
    │   │   ├── pipeline.ts
    │   │   ├── stores.ts
    │   │   ├── tooltip.ts
    │   │   ├── types.ts
    │   │   └── utils.ts
    │   └── routes
    │   │   ├── +layout.svelte
    │   │   ├── +layout.ts
    │   │   └── endpoints
    │   │       └── toc
    │   │           └── +server.ts
    ├── static
    │   └── favicon.png
    ├── svelte.config.js
    ├── svelteKitCustomClient
    │   ├── README.md
    │   ├── client.js
    │   └── replace.js
    ├── tailwind.config.cjs
    ├── tsconfig.json
    └── vite.config.ts
├── pyproject.toml
├── scripts
    ├── .prettierrc
    └── delete-old-prs.ts
├── setup.cfg
├── setup.py
├── src
    └── doc_builder
    │   ├── __init__.py
    │   ├── autodoc.py
    │   ├── build_doc.py
    │   ├── commands
    │       ├── __init__.py
    │       ├── build.py
    │       ├── convert_doc_file.py
    │       ├── doc_builder_cli.py
    │       ├── notebook_to_mdx.py
    │       ├── preview.py
    │       ├── push.py
    │       └── style.py
    │   ├── convert_md_to_mdx.py
    │   ├── convert_rst_to_mdx.py
    │   ├── convert_to_notebook.py
    │   ├── external.py
    │   ├── style_doc.py
    │   └── utils.py
└── tests
    ├── data
        ├── convert_include_dummy.txt
        └── convert_literalinclude_dummy.txt
    ├── test_autodoc.py
    ├── test_build_doc.py
    ├── test_convert_doc_file.py
    ├── test_convert_md_to_mdx.py
    ├── test_convert_rst_to_mdx.py
    ├── test_convert_to_notebook.py
    ├── test_style_doc.py
    └── test_utils.py


/.github/workflows/accelerate_doc.yml:
--------------------------------------------------------------------------------
 1 | name: Accelerate doc build
 2 | 
 3 | on: [pull_request]
 4 | 
 5 | jobs:
 6 |   integration_doc_build:
 7 |     runs-on: ubuntu-latest
 8 |     defaults:
 9 |       run:
10 |         shell: bash -l {0}
11 | 
12 |     steps:
13 |       - uses: actions/setup-node@v4
14 |         with:
15 |           node-version: '20'
16 | 
17 |       - uses: actions/checkout@v4
18 |         with:
19 |           repository: 'huggingface/doc-builder'
20 |           path: doc-builder
21 |       
22 |       - uses: actions/checkout@v4
23 |         with:
24 |           repository: 'huggingface/accelerate'
25 |           path: accelerate
26 |           ref: 16eb6d76bf987c7d8d877ce5152f2e29878eab37
27 | 
28 |       - name: Set up Python
29 |         uses: actions/setup-python@v4
30 |         with:
31 |           python-version: '3.10'
32 | 
33 |       - name: Loading cache
34 |         uses: actions/cache@v4
35 |         id: cache
36 |         with:
37 |           path: ~/.cache/pip
38 |           key: v1-test_build_doc
39 |           restore-keys: |
40 |             v1-test_build_doc-${{ hashFiles('setup.py') }}
41 |             v1-test_build_doc
42 | 
43 |       - name: Create and activate virtual environment
44 |         run: |
45 |           python -m venv venv
46 |           source venv/bin/activate
47 | 
48 |       - name: Setup environment
49 |         run: |
50 |           cd doc-builder
51 |           pip install .
52 |           cd ..
53 | 
54 |           cd accelerate
55 |           pip install .[dev]
56 |           cd ..
57 |           
58 |       - name: Make documentation
59 |         run: |
60 |           cd doc-builder &&
61 |           doc-builder build accelerate ../accelerate/docs/source --build_dir ../build_dir --clean --html &&
62 |           cd ..
63 |         env:
64 |           NODE_OPTIONS: --max-old-space-size=6656
65 | 


--------------------------------------------------------------------------------
/.github/workflows/delete_old_pr_documentations.yml:
--------------------------------------------------------------------------------
 1 | name: Delete old PRs docs
 2 | on:
 3 |   workflow_dispatch:
 4 |   schedule:
 5 |     - cron: "11 11 * * *"
 6 | 
 7 | defaults:
 8 |   run:
 9 |     working-directory: scripts
10 | 
11 | jobs:
12 |   delete_old_prs:
13 |     runs-on: ubuntu-latest
14 |     steps:
15 |       - uses: actions/checkout@v4
16 |       - uses: denoland/setup-deno@v1
17 |         with:
18 |           deno-version: v1.x
19 |       - run: deno run --allow-env --allow-net --allow-run --allow-read ./delete-old-prs.ts
20 |         env:
21 |           HF_ACCESS_TOKEN: ${{ secrets.HF_ACCESS_TOKEN }}
22 | 


--------------------------------------------------------------------------------
/.github/workflows/lint-svelte-kit.yml:
--------------------------------------------------------------------------------
 1 | name: SvelteKit Lint
 2 | on:
 3 |   pull_request:
 4 |     paths:
 5 |       - "kit/**"
 6 |       - ".github/workflows/lint-svelte-kit.yml"
 7 |   push:
 8 |     branches:
 9 |       - main
10 | 
11 | jobs:
12 |   lint:
13 |     runs-on: ubuntu-latest
14 |     timeout-minutes: 10
15 | 
16 |     steps:
17 |       - uses: actions/checkout@v4
18 | 
19 |       - uses: actions/setup-node@v4
20 |         with:
21 |           node-version: "20"
22 | 
23 |       - name: Install dependencies
24 |         run: npm install ci
25 |         working-directory: kit
26 | 
27 |       - name: Checking lint/format errors
28 |         run: npm run lint
29 |         working-directory: kit
30 | 
31 |       - name: Checking type errors
32 |         run: npm run check
33 |         working-directory: kit


--------------------------------------------------------------------------------
/.github/workflows/quality.yml:
--------------------------------------------------------------------------------
 1 | name: Quality Check
 2 | 
 3 | on: [pull_request]
 4 | 
 5 | jobs:
 6 |   quality:
 7 |     runs-on: ubuntu-latest
 8 |     steps:
 9 |     - uses: actions/checkout@v4
10 |     - name: Set up Python 3.10
11 |       uses: actions/setup-python@v5
12 |       with:
13 |         python-version: "3.10"
14 |     - name: Install Python dependencies
15 |       run: pip install -e .[quality]
16 |     - name: Run Quality check
17 |       run: make quality
18 | 


--------------------------------------------------------------------------------
/.github/workflows/test.yml:
--------------------------------------------------------------------------------
 1 | name: Run Tests
 2 | 
 3 | on: [pull_request]
 4 | 
 5 | jobs:
 6 |   test:
 7 |     strategy:
 8 |       matrix:
 9 |         os: [ubuntu-latest, windows-latest]
10 |       fail-fast: false
11 |     runs-on: ${{ matrix.os }}
12 |     steps:
13 |     - uses: actions/checkout@v4
14 |     - name: Set up Python 3.10
15 |       uses: actions/setup-python@v5
16 |       with:
17 |         python-version: "3.10"
18 |     - name: Install Python dependencies
19 |       run: |
20 |         pip install -e ".[all]"
21 |         pip install git+https://github.com/huggingface/transformers
22 |     - name: Run Tests
23 |       run: python -m pytest -n 1 --dist=loadfile -s -v ./tests/
24 | 


--------------------------------------------------------------------------------
/.github/workflows/upload_pr_documentation.yml:
--------------------------------------------------------------------------------
  1 | name: Upload PR documentation
  2 | 
  3 | on:
  4 |   workflow_call:
  5 |     inputs:
  6 |       package_name:
  7 |         required: true
  8 |         type: string
  9 |       hub_base_path:
 10 |         type: string
 11 |       repo_owner:
 12 |         type: string
 13 |         default: 'huggingface'
 14 |         description: "Owner of the repo to build documentation for. Defaults to 'huggingface'."
 15 |     secrets:
 16 |       hf_token:
 17 |         required: true
 18 |       comment_bot_token:
 19 |         required: true
 20 | 
 21 | jobs:
 22 |   upload_pr_documentation:
 23 |     runs-on: ubuntu-22.04
 24 |     if: >
 25 |       (github.event.workflow_run.event == 'pull_request' ||
 26 |       github.event.workflow_run.event == 'pull_request_target' ||
 27 |       github.event.workflow_run.event == 'workflow_dispatch') &&
 28 |       github.event.workflow_run.conclusion == 'success'
 29 | 
 30 |     steps:
 31 |       - uses: actions/checkout@v4
 32 |         with:
 33 |           repository: 'huggingface/doc-builder'
 34 |           path: doc-builder
 35 |           # Uncomment the following line to use a specific revision of doc-builder
 36 |           # ref: fix-corrupted-zip
 37 | 
 38 |       - name: Setup environment
 39 |         shell: bash
 40 |         id: setup-env
 41 |         run: |
 42 |           pip install black
 43 |           cd doc-builder
 44 |           pip install .
 45 |           cd ..
 46 |           echo "current_work_dir=$(pwd)" >> $GITHUB_OUTPUT
 47 | 
 48 |       - name: 'Download artifact'
 49 |         uses: actions/download-artifact@v4
 50 |         with:
 51 |           name: doc-build-artifact
 52 |           path: ${{ github.workspace }}/build_dir
 53 |           github-token: ${{ secrets.GITHUB_TOKEN }}
 54 |           run-id: ${{github.event.workflow_run.id }}
 55 | 
 56 |       - name: Display structure of downloaded files
 57 |         run: ls -l
 58 | 
 59 |       - name: Get commit_sha & pr_number
 60 |         id: github-context
 61 |         run: |
 62 |           content_commit_sha=$(cat ./build_dir/commit_sha)
 63 |           if [[ $content_commit_sha =~ ^[0-9a-zA-Z]{40}$ ]]; then
 64 |             echo "commit_sha=$content_commit_sha" >> $GITHUB_OUTPUT
 65 |             rm -rf ./build_dir/commit_sha
 66 |           else
 67 |             echo "Encountered an invalid commit_sha"
 68 |             exit 1
 69 |           fi
 70 | 
 71 |           content_pr_number=$(cat ./build_dir/pr_number)
 72 |           if [[ $content_pr_number =~ ^[0-9]+$ ]]; then
 73 |             echo "pr_number=$content_pr_number" >> $GITHUB_OUTPUT
 74 |             rm -rf ./build_dir/pr_number
 75 |           else
 76 |             echo "Encountered an invalid pr_number"
 77 |             exit 1
 78 |           fi
 79 | 
 80 |       - name: Set hub_docs_url
 81 |         id: hfhub-context
 82 |         run: |
 83 |           if [ -z "${{ inputs.hub_base_path }}" ]
 84 |           then
 85 |             echo "hub_docs_url=https://moon-ci-docs.huggingface.co/docs/${{ inputs.package_name }}/pr_${{ steps.github-context.outputs.pr_number }}" >> $GITHUB_OUTPUT
 86 |             echo "hub_base_path not provided, defaulting to https://moon-ci-docs.huggingface.co/docs"
 87 |           else
 88 |             echo "hub_docs_url=${{ inputs.hub_base_path }}/${{ inputs.package_name }}/pr_${{ steps.github-context.outputs.pr_number }}" >> $GITHUB_OUTPUT
 89 |           fi
 90 | 
 91 |       - name: Push to repositories
 92 |         shell: bash
 93 |         run: |
 94 |           cd build_dir
 95 |           doc-builder push ${{ inputs.package_name }} --doc_build_repo_id "hf-doc-build/doc-build-dev" --token "${{ secrets.hf_token }}" --commit_msg "Updated with commit ${{ steps.github-context.outputs.commit_sha }} See: https://github.com/${{ inputs.repo_owner }}/${{ inputs.package_name }}/commit/${{ steps.github-context.outputs.commit_sha }}"
 96 | 
 97 |       - name: Find doc comment
 98 |         uses: peter-evans/find-comment@v2
 99 |         id: find_comment
100 |         with:
101 |           issue-number: ${{ steps.github-context.outputs.pr_number }}
102 |           body-includes: docs for this PR
103 | 
104 |       - name: Add doc comment if not present
105 |         uses: thollander/actions-comment-pull-request@v2
106 |         if: steps.find_comment.outputs.comment-id == ''
107 | 
108 |         with:
109 |           message: 'The docs for this PR live [here](${{ steps.hfhub-context.outputs.hub_docs_url }}). All of your documentation changes will be reflected on that endpoint. The docs are available until 30 days after the last update.'
110 |           pr_number: ${{ steps.github-context.outputs.pr_number }}
111 |           GITHUB_TOKEN: ${{ secrets.comment_bot_token }}
112 | 
113 |       - name: Update doc comment if necessary
114 |         if: github.event.action == 'reopened' && steps.find_comment.outputs.comment-id != ''
115 |         uses: peter-evans/create-or-update-comment@v1
116 |         with:
117 |           comment-id: ${{ steps.find_comment.outputs.comment-id }}
118 |           token: ${{ secrets.comment_bot_token }}
119 |           edit-mode: replace
120 |           body: |
121 |             The docs for this PR live [here](${{ steps.hfhub-context.outputs.hub_docs_url }}). All of your documentation changes will be reflected on that endpoint. The docs are available until 30 days after the last update.
122 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Byte-compiled / optimized / DLL files
 2 | __pycache__/
 3 | *.py[cod]
 4 | *$py.class
 5 | 
 6 | # VSCode
 7 | .vscode
 8 | .env
 9 | 
10 | # PyCharm
11 | .idea
12 | 
13 | # Build
14 | build
15 | dist
16 | src/hf_doc_builder.egg-info
17 | src/doc_builder.egg-info
18 | 


--------------------------------------------------------------------------------
/MANIFEST.in:
--------------------------------------------------------------------------------
1 | include kit/*
2 | recursive-include kit/src *


--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
 1 | .PHONY: quality style test
 2 | 
 3 | check_dirs := tests src
 4 | 
 5 | # Make sure to install timm, pytest, transformers
 6 | test:
 7 | 	python -m pytest -n 1 --dist=loadfile -s -v ./tests/
 8 | 
 9 | 
10 | doc:
11 | 	doc-builder build transformers ../transformers/docs/source/
12 | 
13 | quality:
14 | 	black --check $(check_dirs)
15 | 	isort --check-only $(check_dirs)
16 | 	flake8 $(check_dirs)
17 | 
18 | style:
19 | 	black $(check_dirs)
20 | 	isort $(check_dirs)
21 | 


--------------------------------------------------------------------------------
/kit/.eslintignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | 
10 | # Ignore files for PNPM, NPM and YARN
11 | pnpm-lock.yaml
12 | package-lock.json
13 | yarn.lock
14 | 


--------------------------------------------------------------------------------
/kit/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	root: true,
 3 | 	parser: "@typescript-eslint/parser",
 4 | 	extends: [
 5 | 		"eslint:recommended",
 6 | 		"plugin:@typescript-eslint/recommended",
 7 | 		"plugin:svelte/recommended",
 8 | 		"prettier",
 9 | 	],
10 | 	plugins: ["@typescript-eslint"],
11 | 	ignorePatterns: ["*.cjs"],
12 | 	overrides: [
13 | 		{
14 | 			files: ["*.svelte"],
15 | 			parser: "svelte-eslint-parser",
16 | 			parserOptions: {
17 | 				parser: "@typescript-eslint/parser",
18 | 			},
19 | 		},
20 | 	],
21 | 	parserOptions: {
22 | 		sourceType: "module",
23 | 		ecmaVersion: 2020,
24 | 		extraFileExtensions: [".svelte"],
25 | 	},
26 | 	rules: {
27 | 		"no-shadow": ["error"],
28 | 		"@typescript-eslint/no-explicit-any": "error",
29 | 		"@typescript-eslint/no-non-null-assertion": "error",
30 | 		"@typescript-eslint/no-unused-vars": [
31 | 			// prevent variables with a _ prefix from being marked as unused
32 | 			"error",
33 | 			{
34 | 				argsIgnorePattern: "^_",
35 | 			},
36 | 		],
37 | 	},
38 | 	env: {
39 | 		browser: true,
40 | 		es2017: true,
41 | 		node: true,
42 | 	},
43 | };
44 | 


--------------------------------------------------------------------------------
/kit/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | 
10 | # The src/routes folder will be where the unprocessed doc is pasted.
11 | src/routes
12 | 
13 | vite.config.js.timestamp-*
14 | vite.config.ts.timestamp-*
15 | 


--------------------------------------------------------------------------------
/kit/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | resolution-mode=highest
3 | 


--------------------------------------------------------------------------------
/kit/.prettierignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | 
10 | # Ignore files for PNPM, NPM and YARN
11 | pnpm-lock.yaml
12 | package-lock.json
13 | yarn.lock
14 | 


--------------------------------------------------------------------------------
/kit/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"useTabs": true,
3 | 	"trailingComma": "es5",
4 | 	"printWidth": 100,
5 | 	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
6 | 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
7 | }
8 | 


--------------------------------------------------------------------------------
/kit/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "kit",
 3 | 	"version": "0.0.1",
 4 | 	"private": true,
 5 | 	"scripts": {
 6 | 		"custom-svelte-client": "node ./svelteKitCustomClient/replace",
 7 | 		"dev": "npm run custom-svelte-client && vite dev",
 8 | 		"build": "npm run custom-svelte-client && rm -Rf src/routes/__pycache__ && vite build && node postprocess && ./postbuild.sh",
 9 | 		"preview": "vite preview",
10 | 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
11 | 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
12 | 		"lint": "prettier --check --plugin prettier-plugin-svelte .",
13 | 		"format": "prettier --write --plugin prettier-plugin-svelte .",
14 | 		"update-inference-providers": "npm ci && npm i @huggingface/inference@latest && npm i @huggingface/tasks@latest"
15 | 	},
16 | 	"devDependencies": {
17 | 		"@huggingface/inference": "^4.0.1",
18 | 		"@huggingface/tasks": "^0.19.11",
19 | 		"@sveltejs/adapter-auto": "^2.0.0",
20 | 		"@sveltejs/adapter-static": "^2.0.3",
21 | 		"@sveltejs/kit": "^1.20.4",
22 | 		"@tailwindcss/aspect-ratio": "^0.4.2",
23 | 		"@tailwindcss/forms": "^0.5.6",
24 | 		"@tailwindcss/typography": "^0.5.10",
25 | 		"@types/js-yaml": "^4.0.6",
26 | 		"@types/node": "^20.6.5",
27 | 		"@typescript-eslint/eslint-plugin": "^6.7.2",
28 | 		"autoprefixer": "^10.4.14",
29 | 		"cheerio": "^1.0.0-rc.12",
30 | 		"domutils": "^2.8.0",
31 | 		"eslint": "^8.50.0",
32 | 		"eslint-config-prettier": "^9.0.0",
33 | 		"eslint-plugin-svelte": "^2.33.2",
34 | 		"highlight.js": "^11.8.0",
35 | 		"html-tags": "^3.3.1",
36 | 		"htmlparser2": "^7.2.0",
37 | 		"js-yaml": "^4.1.0",
38 | 		"katex": "^0.16.8",
39 | 		"mdsvex": "^0.11.0",
40 | 		"postcss": "^8.4.24",
41 | 		"postcss-load-config": "^4.0.1",
42 | 		"prettier": "^3.0.3",
43 | 		"prettier-plugin-svelte": "^3.0.3",
44 | 		"prettier-plugin-tailwindcss": "^0.5.4",
45 | 		"svelte": "^4.0.5",
46 | 		"svelte-check": "^3.4.3",
47 | 		"tailwindcss": "^3.3.2",
48 | 		"tslib": "^2.4.1",
49 | 		"typescript": "^5.0.0",
50 | 		"unist-util-visit": "^5.0.0",
51 | 		"vite": "^4.4.2"
52 | 	},
53 | 	"type": "module"
54 | }
55 | 


--------------------------------------------------------------------------------
/kit/postbuild.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | set -euo pipefail
 3 | IFS=$'\n\t'
 4 | 
 5 | cp src/routes/_toctree.yml build/_toctree.yml
 6 | 
 7 | # Copy redirects yml file if exists
 8 | if [ -e src/routes/_redirects.yml ]
 9 |  then cp src/routes/_redirects.yml build/_redirects.yml
10 | fi
11 | 
12 | # make `rel="stylesheet"` -> `rel="modulepreload"`
13 | cd build
14 | find . -name '*.html' -exec perl -pi -e 's/rel="stylesheet"/rel="modulepreload"/g' {} +
15 | cd ..


--------------------------------------------------------------------------------
/kit/postcss.config.cjs:
--------------------------------------------------------------------------------
 1 | const tailwindcss = require("tailwindcss");
 2 | const autoprefixer = require("autoprefixer");
 3 | const postcss = require("postcss");
 4 | 
 5 | const removeAllCss = postcss.plugin("postcss-empty", () => {
 6 | 	return (root) => {
 7 | 		root.removeAll(); // This will remove all the nodes, effectively emptying the content.
 8 | 	};
 9 | });
10 | 
11 | const plugins = [
12 | 	//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
13 | 	tailwindcss(),
14 | 	//But others, like autoprefixer, need to run after,
15 | 	autoprefixer,
16 | ];
17 | 
18 | // make the resulting CSS files empty during "build" process
19 | // to not conflict with the already existing hub tailwind
20 | if (process.argv.includes("build")) {
21 | 	plugins.push(removeAllCss);
22 | }
23 | 
24 | const config = { plugins };
25 | 
26 | module.exports = config;
27 | 


--------------------------------------------------------------------------------
/kit/postprocess.js:
--------------------------------------------------------------------------------
 1 | import fs from "fs";
 2 | import path from "path";
 3 | 
 4 | const directoryPath = "./build"; //build dir
 5 | 
 6 | // Recursively read all HTML files in a directory
 7 | function readFiles(directory) {
 8 | 	const files = fs.readdirSync(directory);
 9 | 
10 | 	files.forEach((file) => {
11 | 		const filePath = path.join(directory, file);
12 | 		const stat = fs.statSync(filePath);
13 | 
14 | 		if (stat.isDirectory()) {
15 | 			readFiles(filePath);
16 | 		} else if (filePath.endsWith(".html")) {
17 | 			processFile(filePath);
18 | 		}
19 | 	});
20 | }
21 | 
22 | // Regex to match `meta name="hf:doc:metadata"`
23 | const REGEX_HF_METADATA = /<!-- HEAD_svelte-.+_START -->(.+)<!-- HEAD_svelte-.+_END -->/s;
24 | 
25 | function processFile(filePath) {
26 | 	// Read the file synchronously
27 | 	const data = fs.readFileSync(filePath, "utf8");
28 | 	// Extract the matched group using the regex
29 | 	const match = data.match(REGEX_HF_METADATA);
30 | 	// Append macthed group 1 to the first line
31 | 	const lines = data.split("\n");
32 | 	lines[0] += match[1];
33 | 	// Join the lines back and write to the file synchronously
34 | 	const updatedData = lines.join("\n");
35 | 	fs.writeFileSync(filePath, updatedData, "utf8");
36 | }
37 | 
38 | readFiles(directoryPath);
39 | 


--------------------------------------------------------------------------------
/kit/preprocessors/frameworkcontent.js:
--------------------------------------------------------------------------------
 1 | import { replaceAsync, generateTagRegex } from "./utils.js";
 2 | 
 3 | // Preprocessor that converts markdown into FrameworkContent
 4 | // svelte component using mdsvexPreprocess
 5 | export const frameworkcontentPreprocess = {
 6 | 	markup: async ({ content }) => {
 7 | 		const REGEX_FRAMEWORKCONTENT = generateTagRegex("frameworkcontent", true);
 8 | 		const REGEX_PYTORCH = generateTagRegex("pt");
 9 | 		const REGEX_TENSORFLOW = generateTagRegex("tf");
10 | 		const REGEX_JAX = generateTagRegex("jax");
11 | 
12 | 		content = await replaceAsync(content, REGEX_FRAMEWORKCONTENT, async (_, fwcontentBody) => {
13 | 			const FRAMEWORKS = [
14 | 				{ framework: "pytorch", REGEX_FW: REGEX_PYTORCH, isExist: false },
15 | 				{ framework: "tensorflow", REGEX_FW: REGEX_TENSORFLOW, isExist: false },
16 | 				{ framework: "jax", REGEX_FW: REGEX_JAX, isExist: false },
17 | 			];
18 | 
19 | 			let svelteSlots = "";
20 | 
21 | 			for (const [i, value] of Object.entries(FRAMEWORKS)) {
22 | 				const { framework, REGEX_FW } = value;
23 | 				if (fwcontentBody.match(REGEX_FW)) {
24 | 					FRAMEWORKS[i].isExist = true;
25 | 					const fwContent = fwcontentBody.match(REGEX_FW)[1];
26 | 					svelteSlots += `<svelte:fragment slot="${framework}">
27 | 					<Markdown>
28 | 					\n\n${fwContent}\n\n
29 | 					</Markdown>
30 | 					</svelte:fragment>`;
31 | 				}
32 | 			}
33 | 
34 | 			const svelteProps = FRAMEWORKS.map((fw) => `${fw.framework}={${fw.isExist}}`).join(" ");
35 | 
36 | 			return `\n\n<FrameworkContent ${svelteProps}>\n${svelteSlots}\n</FrameworkContent>\n\n`;
37 | 		});
38 | 
39 | 		return { code: content };
40 | 	},
41 | };
42 | 


--------------------------------------------------------------------------------
/kit/preprocessors/hashInCode.js:
--------------------------------------------------------------------------------
 1 | import { replaceAsync } from "./utils.js";
 2 | 
 3 | // Preprocessor that converts `#` char inside code/codeblocks into its html5 entity `&amp;num;`
 4 | // otherwise, an extra new space was being rendered
 5 | export const hashInCodePreprocess = {
 6 | 	markup: async ({ content }) => {
 7 | 		const REGEX_CODE_BLOCK = /```.*?```/gs;
 8 | 		const REGEX_INLINE_CODE = /`.*?`/g;
 9 | 		const REGEX_INLINE_EXCEPTION = /(?!.*HF_DOC_BODY_START)`.*?`(?<!HF_DOC_BODY_END.*)/gs;
10 | 		content = await replaceAsync(content, REGEX_CODE_BLOCK, async (codeContent) => {
11 | 			return codeContent.replaceAll("#", "&amp;num;");
12 | 		});
13 | 		content = await replaceAsync(content, REGEX_INLINE_CODE, async (codeContent) => {
14 | 			return codeContent.replaceAll("#", "&amp;num;");
15 | 		});
16 | 		// Exception: we don't want to replace `#` in code blocks that are part of the doc body, as they may be hrefs
17 | 		content = await replaceAsync(content, REGEX_INLINE_EXCEPTION, async (codeContent) => {
18 | 			return codeContent.replaceAll("&amp;num;", "#");
19 | 		});
20 | 		return { code: content };
21 | 	},
22 | };
23 | 


--------------------------------------------------------------------------------
/kit/preprocessors/hfOptions.js:
--------------------------------------------------------------------------------
 1 | import { replaceAsync, generateTagRegexWithId } from "./utils.js";
 2 | 
 3 | // Preprocessor that converts markdown into HfOptions
 4 | // svelte component using mdsvexPreprocess
 5 | export const hfOptionsPreprocess = {
 6 | 	markup: async ({ content }) => {
 7 | 		const REGEX_HF_OPTIONS = generateTagRegexWithId("hfoptions", true);
 8 | 		const REGEX_HF_OPTION = generateTagRegexWithId("hfoption", true);
 9 | 		content = await replaceAsync(content, REGEX_HF_OPTIONS, async (_, id, hfOptionsContent) => {
10 | 			const options = [];
11 | 			hfOptionsContent = await replaceAsync(
12 | 				hfOptionsContent,
13 | 				REGEX_HF_OPTION,
14 | 				async (__, option, hfOptionContent) => {
15 | 					options.push(option);
16 | 					return `<HfOption id="${id}" option="${option}">\n\n${hfOptionContent}\n\n</HfOption>`;
17 | 				}
18 | 			);
19 | 			return `<HfOptions id="${id}" options={${JSON.stringify(
20 | 				options
21 | 			)}}>\n${hfOptionsContent}\n</HfOptions>`;
22 | 		});
23 | 		return { code: content };
24 | 	},
25 | };
26 | 


--------------------------------------------------------------------------------
/kit/preprocessors/index.js:
--------------------------------------------------------------------------------
1 | export { frameworkcontentPreprocess } from "./frameworkcontent.js";
2 | export { docstringPreprocess } from "./docstring.js";
3 | export { inferenceSnippetPreprocess } from "./inferenceSnippet.js";
4 | export { tokenizersLangPreprocess } from "./tokenizersLang.js";
5 | export { mdsvexPreprocess } from "./mdsvex/index.js";
6 | export { hfOptionsPreprocess } from "./hfOptions.js";
7 | export { hashInCodePreprocess } from "./hashInCode.js";
8 | 


--------------------------------------------------------------------------------
/kit/preprocessors/inferenceSnippet.js:
--------------------------------------------------------------------------------
 1 | import { replaceAsync, generateTagRegex } from "./utils.js";
 2 | 
 3 | // Preprocessor that converts markdown into InferenceApi
 4 | // svelte component using mdsvexPreprocess
 5 | export const inferenceSnippetPreprocess = {
 6 | 	markup: async ({ content }) => {
 7 | 		const REGEX_FRAMEWORKCONTENT = generateTagRegex("inferencesnippet", true);
 8 | 		const REGEX_PYTHON = generateTagRegex("python");
 9 | 		const REGEX_JS = generateTagRegex("js");
10 | 		const REGEX_CURL = generateTagRegex("curl");
11 | 		const FRAMEWORKS = [
12 | 			{ framework: "python", REGEX_FW: REGEX_PYTHON, isExist: false },
13 | 			{ framework: "js", REGEX_FW: REGEX_JS, isExist: false },
14 | 			{ framework: "curl", REGEX_FW: REGEX_CURL, isExist: false },
15 | 		];
16 | 
17 | 		content = await replaceAsync(content, REGEX_FRAMEWORKCONTENT, async (_, fwcontentBody) => {
18 | 			let svelteSlots = "";
19 | 
20 | 			for (const [i, value] of Object.entries(FRAMEWORKS)) {
21 | 				const { framework, REGEX_FW } = value;
22 | 				if (fwcontentBody.match(REGEX_FW)) {
23 | 					FRAMEWORKS[i].isExist = true;
24 | 					const fwContent = fwcontentBody.match(REGEX_FW)[1];
25 | 					svelteSlots += `<svelte:fragment slot="${framework}">
26 | 					<Markdown>
27 | 					\n\n${fwContent}\n\n
28 | 					</Markdown>
29 | 					</svelte:fragment>`;
30 | 				}
31 | 			}
32 | 
33 | 			const svelteProps = FRAMEWORKS.map((fw) => `${fw.framework}={${fw.isExist}}`).join(" ");
34 | 
35 | 			return `<InferenceApi ${svelteProps}>\n${svelteSlots}\n</InferenceApi>`;
36 | 		});
37 | 
38 | 		return { code: content };
39 | 	},
40 | };
41 | 


--------------------------------------------------------------------------------
/kit/preprocessors/tokenizersLang.js:
--------------------------------------------------------------------------------
 1 | import { replaceAsync, generateTagRegex } from "./utils.js";
 2 | 
 3 | // Preprocessor that converts markdown into TokenizersLanguageContent
 4 | // svelte component using mdsvexPreprocess
 5 | export const tokenizersLangPreprocess = {
 6 | 	markup: async ({ content }) => {
 7 | 		const REGEX_FRAMEWORKCONTENT = generateTagRegex("tokenizerslangcontent", true);
 8 | 		const REGEX_PYTHON = generateTagRegex("python");
 9 | 		const RGEX_RUST = generateTagRegex("rust");
10 | 		const REGEX_NODE = generateTagRegex("node");
11 | 		const FRAMEWORKS = [
12 | 			{ framework: "python", REGEX_FW: REGEX_PYTHON, isExist: false },
13 | 			{ framework: "rust", REGEX_FW: RGEX_RUST, isExist: false },
14 | 			{ framework: "node", REGEX_FW: REGEX_NODE, isExist: false },
15 | 		];
16 | 
17 | 		content = await replaceAsync(content, REGEX_FRAMEWORKCONTENT, async (_, fwcontentBody) => {
18 | 			let svelteSlots = "";
19 | 
20 | 			for (const [i, value] of Object.entries(FRAMEWORKS)) {
21 | 				const { framework, REGEX_FW } = value;
22 | 				if (fwcontentBody.match(REGEX_FW)) {
23 | 					FRAMEWORKS[i].isExist = true;
24 | 					const fwContent = fwcontentBody.match(REGEX_FW)[1];
25 | 					svelteSlots += `<svelte:fragment slot="${framework}">
26 | 					<Markdown>
27 | 					\n\n${fwContent}\n\n
28 | 					</Markdown>
29 | 					</svelte:fragment>`;
30 | 				}
31 | 			}
32 | 
33 | 			const svelteProps = FRAMEWORKS.map((fw) => `${fw.framework}={${fw.isExist}}`).join(" ");
34 | 
35 | 			return `<TokenizersLanguageContent ${svelteProps}>\n${svelteSlots}\n</TokenizersLanguageContent>`;
36 | 		});
37 | 
38 | 		return { code: content };
39 | 	},
40 | };
41 | 


--------------------------------------------------------------------------------
/kit/preprocessors/utils.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Async string replace function.
 3 |  * src: https://github.com/dsblv/string-replace-async
 4 |  * @param {string} string
 5 |  * @param {RegExp} searchValue
 6 |  * @param {Function | string} replacer
 7 |  */
 8 | export async function replaceAsync(string, searchValue, replacer) {
 9 | 	if (typeof replacer === "function") {
10 | 		// 1. Run fake pass of `replace`, collect values from `replacer` calls
11 | 		// 2. Resolve them with `Promise.all`
12 | 		// 3. Run `replace` with resolved values
13 | 		const values = [];
14 | 		String.prototype.replace.call(string, searchValue, function () {
15 | 			values.push(replacer.apply(undefined, arguments));
16 | 			return "";
17 | 		});
18 | 		const resolvedValues = await Promise.all(values);
19 | 		return String.prototype.replace.call(string, searchValue, function () {
20 | 			return resolvedValues.shift();
21 | 		});
22 | 	}
23 | 	return String.prototype.replace.call(string, searchValue, replacer);
24 | }
25 | 
26 | /**
27 |  * Render escaped characters like `<`, `{`, '#'.
28 |  * used for Doc
29 |  * @param {string} code
30 |  */
31 | export function renderSvelteChars(code) {
32 | 	return code
33 | 		.replace(/&amp;lcub;/g, "{")
34 | 		.replace(/&amp;lt;/g, "<")
35 | 		.replace(/&amp;num;/g, "#");
36 | }
37 | 
38 | /**
39 |  * Create a regex that captures html-like opening and closing tag and its contents.
40 |  * used for parsing hf custom syntax
41 |  * example: generateTagRegex("inferenceSnippet", true) -> /<inferenceSnippet>(.*?)<\/inferenceSnippet>/msg
42 |  * @param {string} tag - The name of the tag to match content within.
43 |  * @param {boolean} [global=false] - Whether to create a global pattern that matches all occurrences.
44 |  * @returns {RegExp} - The generated RegExp pattern.
45 |  */
46 | export function generateTagRegex(tag, global = false) {
47 | 	const flags = global ? "msg" : "ms";
48 | 	const pattern = new RegExp(`<${tag}>(.*?)<\\/${tag}>`, flags);
49 | 	return pattern;
50 | }
51 | 
52 | /**
53 |  * Create a regex that captures html-like opening and closing tag with attribute "id" and its contents.
54 |  * used for parsing hf custom syntax
55 |  * example: generateTagRegex("inferenceSnippet", true) -> /<inferenceSnippet\s+id=["'](.+)["']\s*>(.*?)<\/inferenceSnippet>/msg
56 |  * @param {string} tag - The name of the tag to match content within.
57 |  * @param {boolean} [global=false] - Whether to create a global pattern that matches all occurrences.
58 |  * @returns {RegExp} - The generated RegExp pattern.
59 |  */
60 | export function generateTagRegexWithId(tag, global = false) {
61 | 	const flags = global ? "msg" : "ms";
62 | 	const pattern = new RegExp(`<${tag}\\s+id=["'](.+?)["']\\s*>(.*?)<\\/${tag}>`, flags);
63 | 	return pattern;
64 | }
65 | 


--------------------------------------------------------------------------------
/kit/src/app.d.ts:
--------------------------------------------------------------------------------
 1 | // See https://kit.svelte.dev/docs/types#app
 2 | // for information about these interfaces
 3 | declare global {
 4 | 	namespace App {
 5 | 		// interface Error {}
 6 | 		// interface Locals {}
 7 | 		// interface PageData {}
 8 | 		// interface Platform {}
 9 | 	}
10 | }
11 | 
12 | export {};
13 | 


--------------------------------------------------------------------------------
/kit/src/app.html:
--------------------------------------------------------------------------------
1 | <meta charset="utf-8" />%sveltekit.head% %sveltekit.body%
2 | 


--------------------------------------------------------------------------------
/kit/src/lib/Added.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import Tip from "./Tip.svelte";
 3 | 
 4 | 	export let version: string;
 5 | </script>
 6 | 
 7 | <Tip>
 8 | 	<p class="font-medium">Added in {version}</p>
 9 | 	<slot />
10 | </Tip>
11 | 


--------------------------------------------------------------------------------
/kit/src/lib/Changed.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import Tip from "./Tip.svelte";
 3 | 
 4 | 	export let version: string;
 5 | </script>
 6 | 
 7 | <Tip>
 8 | 	<p class="font-medium">Changed in {version}</p>
 9 | 	<slot />
10 | </Tip>
11 | 


--------------------------------------------------------------------------------
/kit/src/lib/CodeBlock.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import CopyButton from "./CopyButton.svelte";
 3 | 	let hideCopyButton = true;
 4 | 	export let code = "";
 5 | 	export let highlighted = "";
 6 | 	export let wrap = false;
 7 | 	export let classNames = "";
 8 | 
 9 | 	function handleMouseOver() {
10 | 		hideCopyButton = false;
11 | 	}
12 | 	function handleMouseOut() {
13 | 		hideCopyButton = true;
14 | 	}
15 | </script>
16 | 
17 | <div
18 | 	class="code-block relative {classNames}"
19 | 	on:mouseover={handleMouseOver}
20 | 	on:focus={handleMouseOver}
21 | 	on:mouseout={handleMouseOut}
22 | 	on:blur={handleMouseOut}
23 | >
24 | 	<div class="absolute top-2.5 right-4">
25 | 		<CopyButton
26 | 			classNames="transition duration-200 ease-in-out {hideCopyButton && 'opacity-0'}"
27 | 			label="code excerpt"
28 | 			value={code}
29 | 		/>
30 | 	</div>
31 | 	<pre class={wrap ? "whitespace-pre-wrap" : ""}>{@html highlighted}</pre>
32 | </div>
33 | 


--------------------------------------------------------------------------------
/kit/src/lib/CodeBlockFw.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { getGroupStore } from "./stores";
 3 | 	import CopyButton from "./CopyButton.svelte";
 4 | 	import FrameworkSwitch from "./FrameworkSwitch.svelte";
 5 | 
 6 | 	export let group1: { id: string; code: string; highlighted: string };
 7 | 	export let group2: { id: string; code: string; highlighted: string };
 8 | 	export let wrap = false;
 9 | 
10 | 	const ids = [group1.id, group2.id];
11 | 	const storeKey = ids.join("-");
12 | 	const group = getGroupStore(storeKey);
13 | 
14 | 	let hideCopyButton = true;
15 | 
16 | 	function handleMouseOver() {
17 | 		hideCopyButton = false;
18 | 	}
19 | 	function handleMouseOut() {
20 | 		hideCopyButton = true;
21 | 	}
22 | </script>
23 | 
24 | <div
25 | 	class="code-block relative"
26 | 	on:mouseover={handleMouseOver}
27 | 	on:focus={handleMouseOver}
28 | 	on:mouseout={handleMouseOut}
29 | 	on:focus={handleMouseOut}
30 | >
31 | 	{#if $group === "group1"}
32 | 		<div class="absolute top-2.5 right-4">
33 | 			<CopyButton
34 | 				classNames="transition duration-200 ease-in-out {hideCopyButton && 'opacity-0'}"
35 | 				title="Copy code excerpt to clipboard"
36 | 				value={group1.code}
37 | 			/>
38 | 		</div>
39 | 		<pre class={wrap ? "whitespace-pre-wrap" : ""}><FrameworkSwitch
40 | 				{ids}
41 | 			/>{@html group1.highlighted}</pre>
42 | 	{:else}
43 | 		<div class="absolute top-2.5 right-4">
44 | 			<CopyButton
45 | 				classNames="transition duration-200 ease-in-out {hideCopyButton && 'opacity-0'}"
46 | 				title="Copy code excerpt to clipboard"
47 | 				value={group2.code}
48 | 			/>
49 | 		</div>
50 | 		<pre class={wrap ? "whitespace-pre-wrap" : ""}><FrameworkSwitch
51 | 				{ids}
52 | 			/>{@html group2.highlighted}</pre>
53 | 	{/if}
54 | </div>
55 | 


--------------------------------------------------------------------------------
/kit/src/lib/ColabDropdown.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import Dropdown from "./Dropdown.svelte";
 3 | 	import DropdownEntry from "./DropdownEntry.svelte";
 4 | 
 5 | 	export let options: { label: string; value: string }[] = [];
 6 | 	export let classNames = "";
 7 | 
 8 | 	function onClick(url: string) {
 9 | 		window.open(url);
10 | 	}
11 | </script>
12 | 
13 | <div class={classNames}>
14 | 	<Dropdown btnLabel="" classNames="colab-dropdown" noBtnClass useDeprecatedJS={false}>
15 | 		<slot slot="button">
16 | 			<img
17 | 				alt="Open In Colab"
18 | 				class="!m-0"
19 | 				src="https://colab.research.google.com/assets/colab-badge.svg"
20 | 			/>
21 | 		</slot>
22 | 		<slot slot="menu">
23 | 			{#each options as { label, value }}
24 | 				<DropdownEntry
25 | 					classNames="text-sm !no-underline"
26 | 					iconClassNames="text-gray-500"
27 | 					{label}
28 | 					onClick={() => onClick(value)}
29 | 					useDeprecatedJS={false}
30 | 				/>
31 | 			{/each}
32 | 		</slot>
33 | 	</Dropdown>
34 | </div>
35 | 


--------------------------------------------------------------------------------
/kit/src/lib/CopyButton.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { onDestroy } from "svelte";
 3 | 	import { copyToClipboard } from "./copyToClipboard";
 4 | 
 5 | 	import IconCopy from "./IconCopy.svelte";
 6 | 	import Tooltip from "./Tooltip.svelte";
 7 | 
 8 | 	export let classNames = "";
 9 | 	export let label = "";
10 | 	export let style: "button" | "button-clear" | "text" = "text";
11 | 	export let title = "";
12 | 	export let value: string;
13 | 
14 | 	let isSuccess = false;
15 | 	let timeout: any;
16 | 
17 | 	onDestroy(() => {
18 | 		if (timeout) {
19 | 			clearTimeout(timeout);
20 | 		}
21 | 	});
22 | 
23 | 	function handleClick() {
24 | 		copyToClipboard(decodeURIComponent(atob(value)));
25 | 		isSuccess = true;
26 | 		if (timeout) {
27 | 			clearTimeout(timeout);
28 | 		}
29 | 		timeout = setTimeout(() => {
30 | 			isSuccess = false;
31 | 		}, 1000);
32 | 	}
33 | </script>
34 | 
35 | <button
36 | 	class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none
37 | 		{classNames}
38 | 		{style === 'text' ? 'mx-0.5' : ''}
39 | 		{style === 'button' ? 'btn' : ''}
40 | 		{style === 'button-clear' ? 'py-1 px-2 border rounded-lg shadow-sm' : ''}
41 | 		{!isSuccess && ['button-clear', 'text'].includes(style) ? 'text-gray-600' : ''}
42 | 		{isSuccess ? 'text-green-500' : ''}
43 | 	"
44 | 	on:click={handleClick}
45 | 	title={title || label || "Copy to clipboard"}
46 | 	type="button"
47 | >
48 | 	<IconCopy />
49 | 	<Tooltip classNames={isSuccess ? "opacity-100" : "opacity-0"} />
50 | </button>
51 | 


--------------------------------------------------------------------------------
/kit/src/lib/CourseFloatingBanner.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import DocNotebookDropdown from "./DocNotebookDropdown.svelte";
 3 | 
 4 | 	export let chapter: number;
 5 | 	export let notebooks: { label: string; value: string }[] = [];
 6 | 	export let classNames = "";
 7 | 	export let askForHelpUrl = `https://discuss.huggingface.co/t/chapter-${chapter}-questions`;
 8 | </script>
 9 | 
10 | <DocNotebookDropdown options={notebooks} {classNames}>
11 | 	<svelte:fragment slot="alwaysVisible">
12 | 		<a href={askForHelpUrl} target="_blank">
13 | 			<img
14 | 				alt="Ask a Question"
15 | 				class="!m-0"
16 | 				src="https://img.shields.io/badge/Ask%20a%20question-ffcb4c.svg?logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTEgMTA0IDEwNiI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiMyMzFmMjA7fS5jbHMtMntmaWxsOiNmZmY5YWU7fS5jbHMtM3tmaWxsOiMwMGFlZWY7fS5jbHMtNHtmaWxsOiMwMGE5NGY7fS5jbHMtNXtmaWxsOiNmMTVkMjI7fS5jbHMtNntmaWxsOiNlMzFiMjM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5EaXNjb3Vyc2VfbG9nbzwvdGl0bGU+PGcgaWQ9IkxheWVyXzIiPjxnIGlkPSJMYXllcl8zIj48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik01MS44NywwQzIzLjcxLDAsMCwyMi44MywwLDUxYzAsLjkxLDAsNTIuODEsMCw1Mi44MWw1MS44Ni0uMDVjMjguMTYsMCw1MS0yMy43MSw1MS01MS44N1M4MCwwLDUxLjg3LDBaIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNNTIuMzcsMTkuNzRBMzEuNjIsMzEuNjIsMCwwLDAsMjQuNTgsNjYuNDFsLTUuNzIsMTguNEwzOS40LDgwLjE3YTMxLjYxLDMxLjYxLDAsMSwwLDEzLTYwLjQzWiIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTc3LjQ1LDMyLjEyYTMxLjYsMzEuNiwwLDAsMS0zOC4wNSw0OEwxOC44Niw4NC44MmwyMC45MS0yLjQ3QTMxLjYsMzEuNiwwLDAsMCw3Ny40NSwzMi4xMloiLz48cGF0aCBjbGFzcz0iY2xzLTQiIGQ9Ik03MS42MywyNi4yOUEzMS42LDMxLjYsMCwwLDEsMzguOCw3OEwxOC44Niw4NC44MiwzOS40LDgwLjE3QTMxLjYsMzEuNiwwLDAsMCw3MS42MywyNi4yOVoiLz48cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Ik0yNi40Nyw2Ny4xMWEzMS42MSwzMS42MSwwLDAsMSw1MS0zNUEzMS42MSwzMS42MSwwLDAsMCwyNC41OCw2Ni40MWwtNS43MiwxOC40WiIvPjxwYXRoIGNsYXNzPSJjbHMtNiIgZD0iTTI0LjU4LDY2LjQxQTMxLjYxLDMxLjYxLDAsMCwxLDcxLjYzLDI2LjI5YTMxLjYxLDMxLjYxLDAsMCwwLTQ5LDM5LjYzbC0zLjc2LDE4LjlaIi8+PC9nPjwvZz48L3N2Zz4="
17 | 			/>
18 | 		</a>
19 | 	</svelte:fragment>
20 | </DocNotebookDropdown>
21 | 


--------------------------------------------------------------------------------
/kit/src/lib/Deprecated.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import Tip from "./Tip.svelte";
 3 | 
 4 | 	export let version: string;
 5 | </script>
 6 | 
 7 | <Tip warning>
 8 | 	<p class="font-medium">Deprecated in {version}</p>
 9 | 	<slot />
10 | </Tip>
11 | 


--------------------------------------------------------------------------------
/kit/src/lib/DocNotebookDropdown.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	import { onMount, tick } from "svelte";
  3 | 
  4 | 	import Dropdown from "./Dropdown.svelte";
  5 | 	import DropdownEntry from "./DropdownEntry.svelte";
  6 | 
  7 | 	export let options: { label: string; value: string }[] = [];
  8 | 	export let classNames = "";
  9 | 	let dropdownEl: HTMLDivElement;
 10 | 
 11 | 	const googleColabOptions = options.filter((o) => o.value.includes("colab.research.google.com"));
 12 | 	const awsStudioOptions = options.filter((o) => o.value.includes("studiolab.sagemaker.aws"));
 13 | 
 14 | 	function onClick(url: string) {
 15 | 		window.open(url);
 16 | 	}
 17 | 
 18 | 	function onResize() {
 19 | 		// avoid DocNotebookDropdown overlapping with doc titles (i.e. h1 elements) on smaller screens because of absolute positioning
 20 | 		const h1El = document.querySelector(".prose-doc h1");
 21 | 		const h1SpanEl = document.querySelector(".prose-doc h1 > span");
 22 | 		if (h1El && h1SpanEl) {
 23 | 			const { width: h1Widht } = h1El.getBoundingClientRect();
 24 | 			const { width: spanWidth } = h1SpanEl.getBoundingClientRect();
 25 | 			// correct calculation of dropdownEl's width; othwrwise, the width can count in negative (empty) spaces
 26 | 			let dropdownWidth = 0;
 27 | 			for (let i = 0; i < dropdownEl.children.length; i++) {
 28 | 				const child = dropdownEl.children.item(i);
 29 | 				if (child) {
 30 | 					dropdownWidth += child.clientWidth;
 31 | 				}
 32 | 			}
 33 | 			const bufferMargin = 20;
 34 | 			if (h1Widht - spanWidth < dropdownWidth + bufferMargin) {
 35 | 				dropdownEl.classList.remove("absolute");
 36 | 			} else {
 37 | 				dropdownEl.classList.add("absolute");
 38 | 			}
 39 | 		}
 40 | 	}
 41 | 
 42 | 	onMount(() => {
 43 | 		(async () => {
 44 | 			await tick();
 45 | 			onResize();
 46 | 		})();
 47 | 	});
 48 | </script>
 49 | 
 50 | <svelte:window on:resize={onResize} />
 51 | 
 52 | <div class="flex space-x-1 {classNames}" bind:this={dropdownEl}>
 53 | 	<slot name="alwaysVisible" />
 54 | 	{#if googleColabOptions.length === 1}
 55 | 		<a href={googleColabOptions[0].value} target="_blank">
 56 | 			<img
 57 | 				alt="Open In Colab"
 58 | 				class="!m-0"
 59 | 				src="https://colab.research.google.com/assets/colab-badge.svg"
 60 | 			/>
 61 | 		</a>
 62 | 	{:else if googleColabOptions.length > 1}
 63 | 		<Dropdown btnLabel="" classNames="colab-dropdown" noBtnClass useDeprecatedJS={false}>
 64 | 			<slot slot="button">
 65 | 				<img
 66 | 					alt="Open In Colab"
 67 | 					class="!m-0"
 68 | 					src="https://colab.research.google.com/assets/colab-badge.svg"
 69 | 				/>
 70 | 			</slot>
 71 | 			<slot slot="menu">
 72 | 				{#each googleColabOptions as { label, value }}
 73 | 					<DropdownEntry
 74 | 						classNames="text-sm !no-underline"
 75 | 						iconClassNames="text-gray-500"
 76 | 						{label}
 77 | 						onClick={() => onClick(value)}
 78 | 						useDeprecatedJS={false}
 79 | 					/>
 80 | 				{/each}
 81 | 			</slot>
 82 | 		</Dropdown>
 83 | 	{/if}
 84 | 	{#if awsStudioOptions.length === 1}
 85 | 		<a href={awsStudioOptions[0].value} target="_blank">
 86 | 			<img
 87 | 				alt="Open In Studio Lab"
 88 | 				class="!m-0"
 89 | 				src="https://studiolab.sagemaker.aws/studiolab.svg"
 90 | 			/>
 91 | 		</a>
 92 | 	{:else if awsStudioOptions.length > 1}
 93 | 		<Dropdown btnLabel="" classNames="colab-dropdown" noBtnClass useDeprecatedJS={false}>
 94 | 			<slot slot="button">
 95 | 				<img
 96 | 					alt="Open In Studio Lab"
 97 | 					class="!m-0"
 98 | 					src="https://studiolab.sagemaker.aws/studiolab.svg"
 99 | 				/>
100 | 			</slot>
101 | 			<slot slot="menu">
102 | 				{#each awsStudioOptions as { label, value }}
103 | 					<DropdownEntry
104 | 						classNames="text-sm !no-underline"
105 | 						iconClassNames="text-gray-500"
106 | 						{label}
107 | 						onClick={() => onClick(value)}
108 | 						useDeprecatedJS={false}
109 | 					/>
110 | 				{/each}
111 | 			</slot>
112 | 		</Dropdown>
113 | 	{/if}
114 | </div>
115 | 


--------------------------------------------------------------------------------
/kit/src/lib/Dropdown.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { SvelteComponent } from "svelte";
 3 | 	import DropdownMenu from "./DropdownMenu.svelte";
 4 | 	import IconCaretDown from "./IconCaretDown.svelte";
 5 | 
 6 | 	export let classNames = "";
 7 | 	export let btnClassNames = "";
 8 | 	export let btnIcon: typeof SvelteComponent | undefined = undefined;
 9 | 	export let btnIconClassNames = "";
10 | 	export let btnLabel = "";
11 | 	export let forceMenuAlignement: "left" | "right" | undefined = undefined;
12 | 	export let menuClassNames = "";
13 | 	export let noBtnClass: boolean | undefined = undefined;
14 | 	export let selectedValue: string | undefined = undefined;
15 | 	export let useDeprecatedJS = true;
16 | 	export let withBtnCaret = false;
17 | 
18 | 	let element: HTMLElement | undefined = undefined;
19 | 	let isOpen = false;
20 | 
21 | 	function onClose(e: Event) {
22 | 		if (e.target) {
23 | 			if ((e.target as HTMLElement | undefined)?.className.includes("do-not-close-dropdown")) {
24 | 				return;
25 | 			}
26 | 		}
27 | 		isOpen = false;
28 | 	}
29 | </script>
30 | 
31 | <div class="relative {classNames} {useDeprecatedJS ? 'v2-dropdown' : ''}" bind:this={element}>
32 | 	<!-- Button -->
33 | 	<button
34 | 		class="
35 | 			{btnClassNames}
36 | 			{!noBtnClass ? 'cursor-pointer w-full btn text-sm' : ''}
37 | 			{useDeprecatedJS ? 'v2-dropdown-button' : ''}"
38 | 		on:click={() => (isOpen = !isOpen)}
39 | 		type="button"
40 | 	>
41 | 		<!-- The "button" slot can overwrite the defaut button content -->
42 | 		{#if $$slots.button}
43 | 			<slot name="button" />
44 | 		{:else}
45 | 			{#if btnIcon}
46 | 				<svelte:component this={btnIcon} classNames="mr-1.5 {btnIconClassNames}" />
47 | 			{/if}
48 | 			{btnLabel}
49 | 			{#if withBtnCaret}
50 | 				<IconCaretDown classNames="-mr-1 text-gray-500" />
51 | 			{/if}
52 | 		{/if}
53 | 	</button>
54 | 	<!-- /Button -->
55 | 	<!-- Menu -->
56 | 	{#if isOpen || useDeprecatedJS}
57 | 		<DropdownMenu
58 | 			classNames="{menuClassNames} {useDeprecatedJS ? 'v2-dropdown-menu hidden' : ''}"
59 | 			dropdownElement={element}
60 | 			forceAlignement={forceMenuAlignement}
61 | 			{onClose}
62 | 		>
63 | 			<slot name="menu" />
64 | 		</DropdownMenu>
65 | 	{/if}
66 | 	<!-- Menu -->
67 | </div>
68 | 


--------------------------------------------------------------------------------
/kit/src/lib/DropdownEntry.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { SvelteComponent } from "svelte";
 3 | 
 4 | 	export let classNames = "";
 5 | 	export let dataLabel: string | undefined = undefined;
 6 | 	export let dataUrl: string | undefined = undefined;
 7 | 	export let dataValue: string | undefined = undefined;
 8 | 	export let href: string | undefined = undefined;
 9 | 	export let icon: typeof SvelteComponent | undefined = undefined;
10 | 	export let iconClassNames = "";
11 | 	export let label = "";
12 | 	export let noFollow = false;
13 | 	export let underline = false;
14 | 	export let onClick: (e: MouseEvent) => void = () => {};
15 | 	export let targetBlank = false;
16 | 	export let useDeprecatedJS = true;
17 | </script>
18 | 
19 | <li class="not-prose">
20 | 	<a
21 | 		class="flex items-center hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer px-3 py-1.5 whitespace-nowrap
22 | 			{classNames}
23 | 			{underline ? 'hover:underline' : ''}
24 | 			{useDeprecatedJS ? 'v2-dropdown-entry' : ''}"
25 | 		data-label={dataLabel}
26 | 		data-url={dataUrl}
27 | 		data-value={dataValue}
28 | 		{href}
29 | 		on:click={onClick}
30 | 		rel={noFollow ? "nofollow" : undefined}
31 | 		target={targetBlank ? "_blank" : undefined}
32 | 	>
33 | 		<!-- Adding children to the DropdownEntry element overwrite the default label/icon stuff -->
34 | 		{#if $$slots.default}
35 | 			<slot />
36 | 		{:else}
37 | 			{#if icon}
38 | 				<svelte:component this={icon} classNames="mr-1.5 {iconClassNames}" />
39 | 			{/if}
40 | 			{label}
41 | 		{/if}
42 | 	</a>
43 | </li>
44 | 


--------------------------------------------------------------------------------
/kit/src/lib/DropdownMenu.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { onMount } from "svelte";
 3 | 
 4 | 	type Alignement = "left" | "right";
 5 | 
 6 | 	export let classNames = "";
 7 | 	export let dropdownElement: HTMLElement | undefined = undefined;
 8 | 	export let forceAlignement: Alignement | undefined = undefined;
 9 | 	export let onClose: (e: MouseEvent) => void;
10 | 
11 | 	// MUST be set to left if forceAlignement is undefined or else
12 | 	// the browser won't be able to properly compute x and width
13 | 	let alignement: Alignement = forceAlignement ?? "left";
14 | 	let element: HTMLElement | undefined;
15 | 
16 | 	onMount(() => {
17 | 		document.addEventListener("click", handleClickDocument);
18 | 
19 | 		if (!forceAlignement) {
20 | 			const docWidth = document.documentElement.clientWidth;
21 | 			const domRect = element?.getBoundingClientRect();
22 | 			const left = domRect?.["left"] ?? 0;
23 | 			const width = domRect?.["width"] ?? 0;
24 | 			alignement = left + width > docWidth ? "right" : "left";
25 | 		}
26 | 
27 | 		return () => {
28 | 			document.removeEventListener("click", handleClickDocument);
29 | 		};
30 | 	});
31 | 
32 | 	function handleClickDocument(e: MouseEvent) {
33 | 		// We ignore clicks that happens inside the Dropdown itself
34 | 		// (prevent race condition  with other click handlers)
35 | 		const targetElement = e.target as HTMLElement;
36 | 		if (targetElement !== dropdownElement && !dropdownElement?.contains(targetElement)) {
37 | 			onClose(e);
38 | 		}
39 | 	}
40 | </script>
41 | 
42 | <div
43 | 	bind:this={element}
44 | 	class="absolute top-full mt-1 min-w-full w-auto bg-white rounded-xl overflow-hidden shadow-lg z-10 border border-gray-100
45 | 		{alignement === 'right' ? 'right-0' : 'left-0'}
46 | 		{classNames}"
47 | 	on:click={onClose}
48 | >
49 | 	<ul class="min-w-full w-auto">
50 | 		<slot />
51 | 	</ul>
52 | </div>
53 | 


--------------------------------------------------------------------------------
/kit/src/lib/EditOnGithub.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let source: string = "";
 3 | </script>
 4 | 
 5 | <a
 6 | 	class="!text-gray-400 !no-underline text-sm flex items-center not-prose mt-4"
 7 | 	href={source}
 8 | 	target="_blank"
 9 | >
10 | 	<span>&lt;</span>
11 | 	<span>&gt;</span>
12 | 	<span><span class="underline ml-1.5">Update</span> on GitHub</span>
13 | </a>
14 | 


--------------------------------------------------------------------------------
/kit/src/lib/ExampleCodeBlock.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { onMount } from "svelte";
 3 | 
 4 | 	import IconCopyLink from "./IconCopyLink.svelte";
 5 | 
 6 | 	export let anchor: string;
 7 | 
 8 | 	const bgHighlightClass = "bg-yellow-50 dark:bg-[#494a3d]";
 9 | 	let containerEl: HTMLElement;
10 | 
11 | 	function onHashChange() {
12 | 		const { hash } = window.location;
13 | 		const hashlink = hash.substring(1);
14 | 
15 | 		if (containerEl) {
16 | 			containerEl.classList.remove(...bgHighlightClass.split(" "));
17 | 		}
18 | 		if (hashlink === anchor) {
19 | 			containerEl.classList.add(...bgHighlightClass.split(" "));
20 | 		}
21 | 	}
22 | 
23 | 	onMount(() => {
24 | 		onHashChange();
25 | 	});
26 | </script>
27 | 
28 | <svelte:window on:hashchange={onHashChange} />
29 | 
30 | <div class="relative group rounded-md" bind:this={containerEl}>
31 | 	<a
32 | 		id={anchor}
33 | 		class="header-link block pr-0.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full"
34 | 		href={`#${anchor}`}
35 | 	>
36 | 		<span><IconCopyLink classNames="text-smd" /></span>
37 | 	</a>
38 | 	<slot />
39 | </div>
40 | 


--------------------------------------------------------------------------------
/kit/src/lib/FrameworkContent.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import FrameworkContentBlock from "./FrameworkContentBlock.svelte";
 3 | 	export let pytorch = false;
 4 | 	export let tensorflow = false;
 5 | 	export let jax = false;
 6 | </script>
 7 | 
 8 | <div class="space-y-10 py-6 2xl:py-8 2xl:-mx-4">
 9 | 	{#if pytorch}
10 | 		<FrameworkContentBlock framework="pytorch">
11 | 			<slot name="pytorch" />
12 | 		</FrameworkContentBlock>
13 | 	{/if}
14 | 	{#if tensorflow}
15 | 		<FrameworkContentBlock framework="tensorflow">
16 | 			<slot name="tensorflow" />
17 | 		</FrameworkContentBlock>
18 | 	{/if}
19 | 	{#if jax}
20 | 		<FrameworkContentBlock framework="jax">
21 | 			<slot name="jax" />
22 | 		</FrameworkContentBlock>
23 | 	{/if}
24 | </div>
25 | 


--------------------------------------------------------------------------------
/kit/src/lib/FrameworkContentBlock.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { Framework } from "./types";
 3 | 
 4 | 	import { onMount } from "svelte";
 5 | 	import { getFrameworkStore, AccordianState } from "./stores";
 6 | 	import IconPytorch from "./IconPytorch.svelte";
 7 | 	import IconTensorflow from "./IconTensorflow.svelte";
 8 | 	import IconJax from "./IconJax.svelte";
 9 | 	import IconEyeShow from "./IconEyeShow.svelte";
10 | 	import IconEyeHide from "./IconEyeHide.svelte";
11 | 
12 | 	export let framework: Framework;
13 | 
14 | 	let containerEl: HTMLDivElement;
15 | 	let hashLinks = new Set();
16 | 
17 | 	type SvelteComponent = typeof IconPytorch;
18 | 
19 | 	const FRAMEWORK_CONFIG: Record<Framework, { Icon: SvelteComponent; label: string }> = {
20 | 		pytorch: {
21 | 			Icon: IconPytorch,
22 | 			label: "Pytorch",
23 | 		},
24 | 		tensorflow: {
25 | 			Icon: IconTensorflow,
26 | 			label: "TensorFlow",
27 | 		},
28 | 		jax: {
29 | 			Icon: IconJax,
30 | 			label: "JAX",
31 | 		},
32 | 	};
33 | 	const { Icon, label } = FRAMEWORK_CONFIG[framework];
34 | 	const localStorageKey = `hf_doc_framework_${framework}_is_hidden`;
35 | 	const fwStore = getFrameworkStore(framework);
36 | 
37 | 	$: isClosed = $fwStore === AccordianState.CLOSED;
38 | 
39 | 	function toggleHidden() {
40 | 		$fwStore = $fwStore !== AccordianState.CLOSED ? AccordianState.CLOSED : AccordianState.OPEN;
41 | 		localStorage.setItem(localStorageKey, $fwStore);
42 | 	}
43 | 
44 | 	function onHashChange() {
45 | 		const hashLink = window.location.hash.slice(1);
46 | 		if (hashLinks.has(hashLink)) {
47 | 			$fwStore = AccordianState.HASHASHLINK;
48 | 			localStorage.setItem(localStorageKey, $fwStore);
49 | 		}
50 | 	}
51 | 
52 | 	onMount(() => {
53 | 		const hashLink = window.location.hash.slice(1);
54 | 		const headerClass = "header-link";
55 | 		const headings = containerEl.querySelectorAll(`.${headerClass}`);
56 | 		hashLinks = new Set([...headings].map((h) => h.id));
57 | 		const localState = localStorage.getItem(localStorageKey);
58 | 
59 | 		if (hashLinks.has(hashLink)) {
60 | 			$fwStore = AccordianState.HASHASHLINK;
61 | 		} else if (localState === AccordianState.CLOSED && $fwStore !== AccordianState.HASHASHLINK) {
62 | 			$fwStore = AccordianState.CLOSED;
63 | 		}
64 | 	});
65 | </script>
66 | 
67 | <svelte:window on:hashchange={onHashChange} />
68 | 
69 | <div class="border border-gray-200 rounded-xl px-4 relative" bind:this={containerEl}>
70 | 	<div class="flex h-[22px] mt-[-12.5px] justify-between leading-none">
71 | 		<div class="flex px-1 items-center space-x-1 bg-white dark:bg-gray-950">
72 | 			<svelte:component this={Icon} />
73 | 			<span>{label}</span>
74 | 		</div>
75 | 		{#if !isClosed}
76 | 			<div
77 | 				class="cursor-pointer flex items-center justify-center space-x-1 text-sm px-2 bg-white dark:bg-gray-950 hover:underline leading-none"
78 | 				on:click={toggleHidden}
79 | 			>
80 | 				<IconEyeHide size={"0.9em"} />
81 | 				<span>Hide {label} content</span>
82 | 			</div>
83 | 		{/if}
84 | 	</div>
85 | 	{#if isClosed}
86 | 		<div
87 | 			class="cursor-pointer mt-[-12.5px] flex items-center justify-center space-x-1 py-4 text-sm hover:underline leading-none"
88 | 			on:click={toggleHidden}
89 | 		>
90 | 			<IconEyeShow size={"0.9em"} />
91 | 			<span>Show {label} content</span>
92 | 		</div>
93 | 	{:else}
94 | 		<div class="framework-content">
95 | 			<slot />
96 | 		</div>
97 | 	{/if}
98 | </div>
99 | 


--------------------------------------------------------------------------------
/kit/src/lib/FrameworkSwitch.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { Group } from "./types";
 3 | 	import { getGroupStore } from "./stores";
 4 | 	import IconPytorch from "./IconPytorch.svelte";
 5 | 	import IconTensorflow from "./IconTensorflow.svelte";
 6 | 
 7 | 	export let ids: string[];
 8 | 	const storeKey = ids.join("-");
 9 | 	const group = getGroupStore(storeKey);
10 | 
11 | 	const GROUPS = [
12 | 		{
13 | 			id: "pt",
14 | 			classNames: "",
15 | 			icon: IconPytorch,
16 | 			name: "Pytorch",
17 | 			group: "group1",
18 | 		},
19 | 		{
20 | 			id: "tf",
21 | 			classNames: "",
22 | 			icon: IconTensorflow,
23 | 			name: "TensorFlow",
24 | 			group: "group2",
25 | 		},
26 | 		{
27 | 			id: "stringapi",
28 | 			classNames: "text-blue-600",
29 | 			name: "String API",
30 | 			group: "group1",
31 | 		},
32 | 		{
33 | 			id: "readinstruction",
34 | 			classNames: "text-blue-600",
35 | 			name: "ReadInstruction",
36 | 			group: "group2",
37 | 		},
38 | 	];
39 | 
40 | 	function changeGroup(_group: string) {
41 | 		$group = _group as Group;
42 | 	}
43 | </script>
44 | 
45 | <div>
46 | 	<div
47 | 		class="bg-white leading-none border border-gray-100 rounded-lg inline-flex p-0.5 text-sm mb-4 select-none"
48 | 	>
49 | 		{#each GROUPS.filter((g) => ids.includes(g.id)) as g, i}
50 | 			<button
51 | 				class="flex justify-center py-1.5 px-2.5 focus:outline-none
52 | 			rounded-{i ? 'r' : 'l'}
53 | 			{g.group !== $group && 'text-gray-500 filter grayscale'}"
54 | 				on:click={() => changeGroup(g.group)}
55 | 			>
56 | 				{#if g.icon}
57 | 					<svelte:component this={g.icon} classNames="mr-1.5" />
58 | 				{/if}
59 | 				<p class="!m-0 {g.classNames}">
60 | 					{g.name}
61 | 				</p>
62 | 			</button>
63 | 		{/each}
64 | 	</div>
65 | </div>
66 | 


--------------------------------------------------------------------------------
/kit/src/lib/FrameworkSwitchCourse.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { CourseFramework } from "./types";
 3 | 
 4 | 	import IconPytorch from "./IconPytorch.svelte";
 5 | 	import IconTensorflow from "./IconTensorflow.svelte";
 6 | 
 7 | 	export let fw: CourseFramework;
 8 | 
 9 | 	const FRAMEWORKS = [
10 | 		{
11 | 			id: "pt",
12 | 			classNames: "bg-red-50 dark:bg-transparent text-red-600",
13 | 			icon: IconPytorch,
14 | 			name: "Pytorch",
15 | 		},
16 | 		{
17 | 			id: "tf",
18 | 			classNames: "bg-orange-50 dark:bg-transparent text-yellow-600",
19 | 			icon: IconTensorflow,
20 | 			name: "TensorFlow",
21 | 		},
22 | 	] as const;
23 | </script>
24 | 
25 | <div class="bg-white leading-none border border-gray-100 rounded-lg flex p-0.5 w-56 text-sm mb-4">
26 | 	{#each FRAMEWORKS as f, i}
27 | 		<a
28 | 			class="flex justify-center flex-1 py-1.5 px-2.5 focus:outline-none !no-underline
29 |                 rounded-{i ? 'r' : 'l'} 
30 |                 {f.id === fw ? f.classNames : 'text-gray-500 filter grayscale'}"
31 | 			href="?fw={f.id}"
32 | 		>
33 | 			<svelte:component this={f.icon} classNames="mr-1.5" />
34 | 			{f.name}
35 | 		</a>
36 | 	{/each}
37 | </div>
38 | 


--------------------------------------------------------------------------------
/kit/src/lib/Heading.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import IconCopyLink from "./IconCopyLink.svelte";
 3 | 
 4 | 	export let title: string;
 5 | 	export let local: string;
 6 | 	export let headingTag: string;
 7 | </script>
 8 | 
 9 | <!-- 
10 |     using <svelte:element this="h1, ..." /> would have been cleaner but mdsvex compiler is not working
11 |     read more: https://svelte.dev/docs/special-elements#svelte-element
12 |  -->
13 | 
14 | {#if headingTag === "h1"}
15 | 	<h1 class="relative group">
16 | 		<a
17 | 			id={local}
18 | 			class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full"
19 | 			href="#{local}"><span><IconCopyLink /></span></a
20 | 		> <span>{title}</span>
21 | 	</h1>
22 | {:else if headingTag === "h2"}
23 | 	<h2 class="relative group">
24 | 		<a
25 | 			id={local}
26 | 			class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full"
27 | 			href="#{local}"><span><IconCopyLink /></span></a
28 | 		> <span>{title}</span>
29 | 	</h2>
30 | {:else if headingTag === "h3"}
31 | 	<h3 class="relative group">
32 | 		<a
33 | 			id={local}
34 | 			class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full"
35 | 			href="#{local}"><span><IconCopyLink /></span></a
36 | 		> <span>{title}</span>
37 | 	</h3>
38 | {:else if headingTag === "h4"}
39 | 	<h4 class="relative group">
40 | 		<a
41 | 			id={local}
42 | 			class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full"
43 | 			href="#{local}"><span><IconCopyLink /></span></a
44 | 		> <span>{title}</span>
45 | 	</h4>
46 | {:else if headingTag === "h5"}
47 | 	<h5 class="relative group">
48 | 		<a
49 | 			id={local}
50 | 			class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full"
51 | 			href="#{local}"><span><IconCopyLink /></span></a
52 | 		> <span>{title}</span>
53 | 	</h5>
54 | {:else}
55 | 	<h6 class="relative group">
56 | 		<a
57 | 			id={local}
58 | 			class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full"
59 | 			href="#{local}"><span><IconCopyLink /></span></a
60 | 		> <span>{title}</span>
61 | 	</h6>
62 | {/if}
63 | 


--------------------------------------------------------------------------------
/kit/src/lib/HfOption.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { selectedHfOptions } from "./stores";
 3 | 
 4 | 	export let id: string;
 5 | 	export let option: string;
 6 | </script>
 7 | 
 8 | {#if $selectedHfOptions[id] === option}
 9 | 	<slot />
10 | {/if}
11 | 


--------------------------------------------------------------------------------
/kit/src/lib/HfOptions.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { onMount } from "svelte";
 3 | 	import { selectedHfOptions } from "./stores";
 4 | 	import { getQueryParamValue, updateQueryParamAndReplaceHistory } from "./utils";
 5 | 
 6 | 	export let id: string;
 7 | 	export let options: string[];
 8 | 
 9 | 	$selectedHfOptions[id] = options[0];
10 | 
11 | 	function updateSelectedOption(option: string) {
12 | 		$selectedHfOptions[id] = option;
13 | 		updateQueryParamAndReplaceHistory(id, option);
14 | 	}
15 | 
16 | 	onMount(() => {
17 | 		const valueFromQueryParams = getQueryParamValue(id);
18 | 		if (valueFromQueryParams && options.includes(valueFromQueryParams)) {
19 | 			$selectedHfOptions[id] = valueFromQueryParams;
20 | 		}
21 | 	});
22 | </script>
23 | 
24 | <div class="flex space-x-2 items-center my-1.5 mr-8 h-7 !pl-0 -mx-3 md:mx-0">
25 | 	{#each options as option}
26 | 		<div
27 | 			class="flex items-center border rounded-lg px-1.5 py-1 leading-none select-none text-smd
28 | 			{$selectedHfOptions[id] === option
29 | 				? 'border-gray-800 bg-black dark:bg-gray-700 text-white'
30 | 				: 'text-gray-500 cursor-pointer opacity-90 hover:text-gray-700 dark:hover:text-gray-200 hover:shadow-sm'}"
31 | 			on:click={() => updateSelectedOption(option)}
32 | 		>
33 | 			{option}
34 | 		</div>
35 | 	{/each}
36 | </div>
37 | 
38 | <div class="language-select">
39 | 	<slot />
40 | </div>
41 | 


--------------------------------------------------------------------------------
/kit/src/lib/IconCaretDown.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	focusable="false"
11 | 	role="img"
12 | 	width="1em"
13 | 	height="1em"
14 | 	preserveAspectRatio="xMidYMid meet"
15 | 	viewBox="0 0 24 24"
16 | 	style="transform: rotate(360deg);"
17 | >
18 | 	<path d="M7 10l5 5l5-5z" fill="currentColor" />
19 | </svg>
20 | 


--------------------------------------------------------------------------------
/kit/src/lib/IconCopy.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	aria-hidden="true"
 9 | 	fill="currentColor"
10 | 	focusable="false"
11 | 	role="img"
12 | 	width="1em"
13 | 	height="1em"
14 | 	preserveAspectRatio="xMidYMid meet"
15 | 	viewBox="0 0 32 32"
16 | >
17 | 	<path
18 | 		d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z"
19 | 		transform="translate(0)"
20 | 	/>
21 | 	<path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)" /><rect
22 | 		fill="none"
23 | 		width="32"
24 | 		height="32"
25 | 	/>
26 | </svg>
27 | 


--------------------------------------------------------------------------------
/kit/src/lib/IconCopyLink.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	role="img"
11 | 	width="1em"
12 | 	height="1em"
13 | 	preserveAspectRatio="xMidYMid meet"
14 | 	viewBox="0 0 256 256"
15 | 	><path
16 | 		d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z"
17 | 		fill="currentColor"
18 | 	/></svg
19 | >
20 | 


--------------------------------------------------------------------------------
/kit/src/lib/IconCurl.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	focusable="false"
11 | 	role="img"
12 | 	width="1em"
13 | 	height="1em"
14 | 	preserveAspectRatio="xMidYMid meet"
15 | 	viewBox="0 0 32 32"
16 | >
17 | 	<rect width="32" height="32" rx="4" fill="#1683a5" />
18 | 	<path
19 | 		d="M6.71,14A5,5,0,0,1,8.82,9.29l2.64-2.2c1.67-1.37,2.52-1.41,4.6-1.41H21.7c1.19,0,2.45.27,2.45,1.79s-1.4,1.78-2.45,1.78H15.44a3.31,3.31,0,0,0-2,.89L11.24,12c-.55.44-1,.81-1,1.52v4.41c0,.7.41,1.07,1,1.52l2.16,1.82a3.34,3.34,0,0,0,2,.89H21.7c1.05,0,2.45.23,2.45,1.78s-1.26,1.78-2.45,1.78H16.06c-2.08,0-2.94,0-4.6-1.4L8.82,22.09A5.05,5.05,0,0,1,6.71,17.4Z"
20 | 		fill="#fff"
21 | 	/>
22 | </svg>
23 | 


--------------------------------------------------------------------------------
/kit/src/lib/IconEyeHide.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	export let classNames = "";
 3 | 	export let size = "1em";
 4 | </script>
 5 | 
 6 | <svg
 7 | 	class={classNames}
 8 | 	width={size}
 9 | 	height={size}
10 | 	viewBox="0 0 10 9"
11 | 	fill="currentColor"
12 | 	xmlns="http://www.w3.org/2000/svg"
13 | >
14 | 	<path
15 | 		d="M1.39125 1.9725L0.0883333 0.669997L0.677917 0.0804138L8.9275 8.33041L8.33792 8.91958L6.95875 7.54041C6.22592 8.00523 5.37572 8.25138 4.50792 8.25C2.26125 8.25 0.392083 6.63333 0 4.5C0.179179 3.52946 0.667345 2.64287 1.39167 1.9725H1.39125ZM5.65667 6.23833L5.04667 5.62833C4.81335 5.73996 4.55116 5.77647 4.29622 5.73282C4.04129 5.68918 3.80617 5.56752 3.62328 5.38463C3.44039 5.20175 3.31874 4.96663 3.27509 4.71169C3.23144 4.45676 3.26795 4.19456 3.37958 3.96125L2.76958 3.35125C2.50447 3.75187 2.38595 4.2318 2.4341 4.70978C2.48225 5.18777 2.6941 5.63442 3.0338 5.97411C3.37349 6.31381 3.82015 6.52567 4.29813 6.57382C4.77611 6.62197 5.25605 6.50345 5.65667 6.23833ZM2.83042 1.06666C3.35 0.862497 3.91625 0.749997 4.50792 0.749997C6.75458 0.749997 8.62375 2.36666 9.01583 4.5C8.88816 5.19404 8.60119 5.84899 8.1775 6.41333L6.56917 4.805C6.61694 4.48317 6.58868 4.15463 6.48664 3.84569C6.3846 3.53675 6.21162 3.256 5.98156 3.02594C5.7515 2.79588 5.47075 2.6229 5.16181 2.52086C4.85287 2.41882 4.52433 2.39056 4.2025 2.43833L2.83042 1.06708V1.06666Z"
16 | 		fill="currentColor"
17 | 	/>
18 | </svg>
19 | 


--------------------------------------------------------------------------------
/kit/src/lib/IconEyeShow.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	export let classNames = "";
 3 | 	export let size = "1em";
 4 | </script>
 5 | 
 6 | <svg
 7 | 	class={classNames}
 8 | 	width={size}
 9 | 	height={size}
10 | 	viewBox="0 0 9 9"
11 | 	fill="currentColor"
12 | 	xmlns="http://www.w3.org/2000/svg"
13 | >
14 | 	<path
15 | 		d="M0 4.50001C0.390979 2.37042 2.25728 0.756592 4.5 0.756592C6.74272 0.756592 8.60861 2.37042 9 4.50001C8.60902 6.62959 6.74272 8.24342 4.5 8.24342C2.25728 8.24342 0.391395 6.62959 0 4.50001ZM4.5 6.57968C5.05156 6.57968 5.58054 6.36057 5.97055 5.97056C6.36057 5.58054 6.57967 5.05157 6.57967 4.50001C6.57967 3.94844 6.36057 3.41947 5.97055 3.02945C5.58054 2.63944 5.05156 2.42033 4.5 2.42033C3.94844 2.42033 3.41946 2.63944 3.02945 3.02945C2.63943 3.41947 2.42033 3.94844 2.42033 4.50001C2.42033 5.05157 2.63943 5.58054 3.02945 5.97056C3.41946 6.36057 3.94844 6.57968 4.5 6.57968ZM4.5 5.74781C4.16906 5.74781 3.85168 5.61635 3.61767 5.38234C3.38366 5.14833 3.2522 4.83094 3.2522 4.50001C3.2522 4.16907 3.38366 3.85168 3.61767 3.61767C3.85168 3.38367 4.16906 3.2522 4.5 3.2522C4.83094 3.2522 5.14832 3.38367 5.38233 3.61767C5.61634 3.85168 5.7478 4.16907 5.7478 4.50001C5.7478 4.83094 5.61634 5.14833 5.38233 5.38234C5.14832 5.61635 4.83094 5.74781 4.5 5.74781Z"
16 | 		fill="currentColor"
17 | 	/>
18 | </svg>
19 | 


--------------------------------------------------------------------------------
/kit/src/lib/IconJax.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	focusable="false"
11 | 	role="img"
12 | 	width="1.73em"
13 | 	height="1em"
14 | 	preserveAspectRatio="xMidYMid meet"
15 | 	viewBox="0 0 451 260.81"
16 | >
17 | 	<style>
18 | 		.J {
19 | 			stroke: #dce0df;
20 | 		}
21 | 		.K {
22 | 			stroke-linejoin: round;
23 | 		}
24 | 	</style>
25 | 	<g fill="#5e97f6" class="J K">
26 | 		<path d="M50.5 130.4l-25 43.31h50l25-43.31h-50z" />
27 | 		<path d="M.5 217.01l25-43.3h50l-25 43.3H.5z" />
28 | 		<path d="M125.5 173.71h-50l-25 43.3h50l25-43.3z" />
29 | 		<path d="M175.5 173.71h-50l-25 43.3h50l25-43.3z" />
30 | 		<path d="M150.5 130.4l-25 43.31h50l25-43.31h-50z" />
31 | 		<path d="M175.5 87.1l-25 43.3h50l25-43.3h-50z" />
32 | 		<path d="M200.5 43.8l-25 43.3h50l25-43.3h-50z" />
33 | 		<path d="M225.5.5l-25 43.3h50l25-43.3h-50z" />
34 | 	</g>
35 | 	<g fill="#2a56c6" class="J K">
36 | 		<path d="M.5 217.01l25 43.3h50l-25-43.3H.5z" />
37 | 		<path d="M125.5 260.31h-50l-25-43.3h50l25 43.3z" />
38 | 		<path d="M175.5 260.31h-50l-25-43.3h50l25 43.3z" />
39 | 	</g>
40 | 	<g fill="#00796b" class="J K">
41 | 		<path d="M200.5 217.01l-25-43.3-25 43.3 25 43.3 25-43.3zm50-86.61l-25-43.3-25 43.3h50z" />
42 | 		<path d="M250.5 43.8l-25 43.3 25 43.3 25-43.3-25-43.3z" />
43 | 	</g>
44 | 	<path d="M125.5 173.71l-25-43.31-25 43.31h50z" fill="#3367d6" class="J K" />
45 | 	<g fill="#26a69a" class="J K">
46 | 		<path d="M250.5 130.4h-50l-25 43.31h50l25-43.31z" />
47 | 		<path d="M300.5 130.4h-50l-25 43.31h50l25-43.31z" />
48 | 	</g>
49 | 	<g fill="#9c27b0" class="J K">
50 | 		<path d="M350.5 43.8L325.5.5l-25 43.3 25 43.3 25-43.3z" />
51 | 		<path d="M375.5 87.1l-25-43.3-25 43.3 25 43.3 25-43.3z" />
52 | 		<path d="M400.5 130.4l-25-43.3-25 43.3 25 43.31 25-43.31z" />
53 | 		<path d="M425.5 173.71l-25-43.31-25 43.31 25 43.3 25-43.3z" />
54 | 		<path
55 | 			d="M450.5 217.01l-25-43.3-25 43.3 25 43.3 25-43.3zM425.5.5l-25 43.3 25 43.3 25-43.3-25-43.3z"
56 | 		/>
57 | 		<path
58 | 			d="M375.5 87.1l25-43.3 25 43.3-25 43.3-25-43.3zm-25 43.3l-25 43.31 25 43.3 25-43.3-25-43.31z"
59 | 		/>
60 | 		<path d="M325.5 260.31l-25-43.3 25-43.3 25 43.3-25 43.3z" />
61 | 	</g>
62 | 	<path d="M275.5 260.31l-25-43.3h50l25 43.3h-50z" fill="#6a1b9a" class="J K" />
63 | 	<g fill="#00695c" class="J K">
64 | 		<path d="M225.5 173.71h-50l25 43.3h50l-25-43.3z" />
65 | 		<path d="M275.5 173.71h-50l25 43.3 25-43.3zm0-86.61l25 43.3h50l-25-43.3h-50z" />
66 | 		<path d="M300.5 43.8h-50l25 43.3h50l-25-43.3zm125 216.51l-25-43.3h-50l25 43.3h50z" />
67 | 		<path d="M375.5 173.71l-25 43.3h50l-25-43.3z" />
68 | 	</g>
69 | 	<g fill="#ea80fc" class="J K">
70 | 		<path d="M325.5.5h-50l-25 43.3h50l25-43.3zm0 173.21h-50l-25 43.3h50l25-43.3z" />
71 | 		<path d="M350.5 130.4h-50l-25 43.31h50l25-43.31zM425.5.5h-50l-25 43.3h50l25-43.3z" />
72 | 		<path d="M375.5 87.1l-25-43.3h50l-25 43.3z" />
73 | 	</g>
74 | </svg>
75 | 


--------------------------------------------------------------------------------
/kit/src/lib/IconJs.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	focusable="false"
11 | 	role="img"
12 | 	width="1em"
13 | 	height="1em"
14 | 	preserveAspectRatio="xMidYMid meet"
15 | 	viewBox="0 0 32 32"
16 | >
17 | 	<rect width="32" height="32" fill="#f7df1e" />
18 | 	<path
19 | 		d="M21.5,25a3.27,3.27,0,0,0,3,1.83c1.25,0,2-.63,2-1.49,0-1-.81-1.39-2.19-2L23.56,23C21.39,22.1,20,20.94,20,18.49c0-2.25,1.72-4,4.41-4a4.44,4.44,0,0,1,4.27,2.41l-2.34,1.5a2,2,0,0,0-1.93-1.29,1.31,1.31,0,0,0-1.44,1.29c0,.9.56,1.27,1.85,1.83l.75.32c2.55,1.1,4,2.21,4,4.72,0,2.71-2.12,4.19-5,4.19a5.78,5.78,0,0,1-5.48-3.07Zm-10.63.26c.48.84.91,1.55,1.94,1.55s1.61-.39,1.61-1.89V14.69h3V25c0,3.11-1.83,4.53-4.49,4.53a4.66,4.66,0,0,1-4.51-2.75Z"
20 | 	/>
21 | </svg>
22 | 


--------------------------------------------------------------------------------
/kit/src/lib/IconNode.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	role="img"
11 | 	width="1em"
12 | 	height="1em"
13 | 	preserveAspectRatio="xMidYMid meet"
14 | 	viewBox="0 0 256 289"
15 | 	><path
16 | 		fill="#539E43"
17 | 		d="M128 288.464c-3.975 0-7.685-1.06-11.13-2.915l-35.247-20.936c-5.3-2.915-2.65-3.975-1.06-4.505c7.155-2.385 8.48-2.915 15.9-7.156c.796-.53 1.856-.265 2.65.265l27.032 16.166c1.06.53 2.385.53 3.18 0l105.74-61.217c1.06-.53 1.59-1.59 1.59-2.915V83.08c0-1.325-.53-2.385-1.59-2.915l-105.74-60.953c-1.06-.53-2.385-.53-3.18 0L20.405 80.166c-1.06.53-1.59 1.855-1.59 2.915v122.17c0 1.06.53 2.385 1.59 2.915l28.887 16.695c15.636 7.95 25.44-1.325 25.44-10.6V93.68c0-1.59 1.326-3.18 3.181-3.18h13.516c1.59 0 3.18 1.325 3.18 3.18v120.58c0 20.936-11.396 33.126-31.272 33.126c-6.095 0-10.865 0-24.38-6.625l-27.827-15.9C4.24 220.885 0 213.465 0 205.515V83.346C0 75.396 4.24 67.976 11.13 64L116.87 2.783c6.625-3.71 15.635-3.71 22.26 0L244.87 64C251.76 67.975 256 75.395 256 83.346v122.17c0 7.95-4.24 15.37-11.13 19.345L139.13 286.08c-3.445 1.59-7.42 2.385-11.13 2.385Zm32.596-84.009c-46.377 0-55.917-21.2-55.917-39.221c0-1.59 1.325-3.18 3.18-3.18h13.78c1.59 0 2.916 1.06 2.916 2.65c2.12 14.045 8.215 20.936 36.306 20.936c22.261 0 31.802-5.035 31.802-16.96c0-6.891-2.65-11.926-37.367-15.372c-28.886-2.915-46.907-9.275-46.907-32.33c0-21.467 18.02-34.187 48.232-34.187c33.921 0 50.617 11.66 52.737 37.101c0 .795-.265 1.59-.795 2.385c-.53.53-1.325 1.06-2.12 1.06h-13.78c-1.326 0-2.65-1.06-2.916-2.385c-3.18-14.575-11.395-19.345-33.126-19.345c-24.38 0-27.296 8.48-27.296 14.84c0 7.686 3.445 10.07 36.306 14.31c32.597 4.24 47.967 10.336 47.967 33.127c-.265 23.321-19.345 36.571-53.002 36.571Z"
18 | 	/></svg
19 | >
20 | 


--------------------------------------------------------------------------------
/kit/src/lib/IconPython.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	focusable="false"
11 | 	role="img"
12 | 	width="1em"
13 | 	height="1em"
14 | 	preserveAspectRatio="xMidYMid meet"
15 | 	viewBox="0 0 32 32"
16 | >
17 | 	<path
18 | 		d="M15.84.5a16.4,16.4,0,0,0-3.57.32C9.1,1.39,8.53,2.53,8.53,4.64V7.48H16v1H5.77a4.73,4.73,0,0,0-4.7,3.74,14.82,14.82,0,0,0,0,7.54c.57,2.28,1.86,3.82,4,3.82h2.6V20.14a4.73,4.73,0,0,1,4.63-4.63h7.38a3.72,3.72,0,0,0,3.73-3.73V4.64A4.16,4.16,0,0,0,19.65.82,20.49,20.49,0,0,0,15.84.5ZM11.78,2.77a1.39,1.39,0,0,1,1.38,1.46,1.37,1.37,0,0,1-1.38,1.38A1.42,1.42,0,0,1,10.4,4.23,1.44,1.44,0,0,1,11.78,2.77Z"
19 | 		fill="#5a9fd4"
20 | 	/>
21 | 	<path
22 | 		d="M16.16,31.5a16.4,16.4,0,0,0,3.57-.32c3.17-.57,3.74-1.71,3.74-3.82V24.52H16v-1H26.23a4.73,4.73,0,0,0,4.7-3.74,14.82,14.82,0,0,0,0-7.54c-.57-2.28-1.86-3.82-4-3.82h-2.6v3.41a4.73,4.73,0,0,1-4.63,4.63H12.35a3.72,3.72,0,0,0-3.73,3.73v7.14a4.16,4.16,0,0,0,3.73,3.82A20.49,20.49,0,0,0,16.16,31.5Zm4.06-2.27a1.39,1.39,0,0,1-1.38-1.46,1.37,1.37,0,0,1,1.38-1.38,1.42,1.42,0,0,1,1.38,1.38A1.44,1.44,0,0,1,20.22,29.23Z"
23 | 		fill="#ffd43b"
24 | 	/>
25 | </svg>
26 | 


--------------------------------------------------------------------------------
/kit/src/lib/IconPytorch.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	focusable="false"
11 | 	role="img"
12 | 	width="1em"
13 | 	height="1em"
14 | 	preserveAspectRatio="xMidYMid meet"
15 | 	viewBox="0 0 32 32"
16 | >
17 | 	<defs>
18 | 		<clipPath id="a">
19 | 			<rect x="3.05" y="0.5" width="25.73" height="31" fill="none" />
20 | 		</clipPath>
21 | 	</defs>
22 | 	<g clip-path="url(#a)">
23 | 		<path
24 | 			d="M24.94,9.51a12.81,12.81,0,0,1,0,18.16,12.68,12.68,0,0,1-18,0,12.81,12.81,0,0,1,0-18.16l9-9V5l-.84.83-6,6a9.58,9.58,0,1,0,13.55,0ZM20.44,9a1.68,1.68,0,1,1,1.67-1.67A1.68,1.68,0,0,1,20.44,9Z"
25 | 			fill="#ee4c2c"
26 | 		/>
27 | 	</g>
28 | </svg>
29 | 


--------------------------------------------------------------------------------
/kit/src/lib/IconRust.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	focusable="false"
11 | 	role="img"
12 | 	preserveAspectRatio="xMidYMid meet"
13 | 	width="1em"
14 | 	height="1em"
15 | 	viewBox="0 0 32 32"
16 | >
17 | 	<path
18 | 		d="M31.77,15.61l-1.34-.83c0-.13,0-.26,0-.39l1.16-1.08a.46.46,0,0,0,.14-.43.44.44,0,0,0-.29-.34L29.92,12l-.12-.38.92-1.28a.46.46,0,0,0,.06-.45.47.47,0,0,0-.36-.28l-1.55-.25L28.68,9l.66-1.44a.48.48,0,0,0,0-.45.46.46,0,0,0-.4-.2L27.32,7l-.25-.3.36-1.54a.46.46,0,0,0-.12-.43.46.46,0,0,0-.43-.13l-1.54.37L25,4.68l.06-1.58a.44.44,0,0,0-.21-.4.45.45,0,0,0-.45,0L23,3.32l-.35-.19L22.4,1.57a.46.46,0,0,0-.28-.35.48.48,0,0,0-.45.05l-1.28.92L20,2.08,19.46.6a.44.44,0,0,0-.34-.29.46.46,0,0,0-.43.14L17.62,1.6l-.39,0L16.39.22a.46.46,0,0,0-.78,0l-.83,1.34-.39,0L13.31.45a.46.46,0,0,0-.43-.14.44.44,0,0,0-.34.29L12,2.08l-.38.11-1.28-.92a.48.48,0,0,0-.45-.05.5.5,0,0,0-.28.35L9.35,3.13,9,3.32,7.57,2.66a.45.45,0,0,0-.45,0,.49.49,0,0,0-.21.4L7,4.68l-.31.25L5.13,4.56a.48.48,0,0,0-.44.13.46.46,0,0,0-.12.43l.36,1.54L4.68,7l-1.58,0a.46.46,0,0,0-.4.2.48.48,0,0,0,0,.45L3.32,9l-.19.35L1.57,9.6a.47.47,0,0,0-.35.28.48.48,0,0,0,.05.45l.92,1.28c0,.12-.07.25-.11.38L.6,12.54a.44.44,0,0,0-.29.34.46.46,0,0,0,.14.43L1.6,14.39l0,.39-1.35.83a.47.47,0,0,0,0,.78l1.35.84,0,.39L.45,18.69a.46.46,0,0,0-.14.43.44.44,0,0,0,.29.34L2.08,20c0,.13.07.26.11.39l-.92,1.28a.46.46,0,0,0-.05.44.45.45,0,0,0,.36.28l1.55.25.19.35-.65,1.44a.45.45,0,0,0,.43.65L4.68,25l.25.3-.36,1.54a.46.46,0,0,0,.12.43.48.48,0,0,0,.44.12l1.54-.36.3.25L6.91,28.9a.49.49,0,0,0,.21.4.48.48,0,0,0,.45,0L9,28.68l.35.19.26,1.56a.46.46,0,0,0,.27.35.48.48,0,0,0,.45-.05l1.28-.92.38.12.55,1.47a.47.47,0,0,0,.34.29.46.46,0,0,0,.43-.13l1.08-1.16.39,0,.83,1.34A.46.46,0,0,0,16,32a.47.47,0,0,0,.4-.22l.83-1.34.39,0,1.08,1.16a.46.46,0,0,0,.43.13.47.47,0,0,0,.34-.29L20,29.93l.38-.12,1.28.92a.48.48,0,0,0,.45.05.45.45,0,0,0,.27-.35l.26-1.56.35-.19,1.43.66a.48.48,0,0,0,.45,0,.49.49,0,0,0,.21-.4L25,27.32l.3-.25,1.54.36a.48.48,0,0,0,.44-.12.46.46,0,0,0,.12-.43l-.36-1.54.25-.3,1.58.05a.45.45,0,0,0,.43-.65L28.69,23l.19-.35,1.55-.25a.45.45,0,0,0,.36-.28.43.43,0,0,0-.06-.44l-.92-1.28.12-.39,1.48-.55a.44.44,0,0,0,.29-.34.46.46,0,0,0-.14-.43L30.4,17.62c0-.13,0-.26,0-.39l1.34-.84a.46.46,0,0,0,0-.78Zm-9,11.16A1,1,0,1,1,23.92,26a.95.95,0,0,1-1.14.73Zm-.45-3.09a.87.87,0,0,0-1,.67l-.48,2.22a11.74,11.74,0,0,1-9.75,0l-.48-2.23a.85.85,0,0,0-1-.66l-2,.42a14.67,14.67,0,0,1-1-1.2h9.58c.1,0,.18,0,.18-.12V19.35c0-.1-.08-.12-.18-.12h-2.8V17.08h3a1.9,1.9,0,0,1,1.86,1.62c.12.47.39,2,.57,2.5s.91,1.65,1.69,1.65h4.77l.17,0a11,11,0,0,1-1.08,1.27l-2-.43Zm-13.24,3A.94.94,0,0,1,8,26a1,1,0,1,1,1.13.73ZM5.45,12a1,1,0,0,1-1.74.77,1,1,0,0,1,.49-1.26A1,1,0,0,1,5.45,12ZM4.33,14.66l2.05-.91a.87.87,0,0,0,.44-1.15l-.42-.95H8.06v7.46H4.73a11.37,11.37,0,0,1-.45-3.21,10.41,10.41,0,0,1,.07-1.26Zm9-.73v-2.2h3.95c.2,0,1.44.24,1.44,1.16,0,.77-.95,1-1.73,1H13.32Zm14.34,2q0,.45,0,.87h-1.2c-.12,0-.17.08-.17.2v.55c0,1.3-.73,1.58-1.37,1.65s-1.29-.25-1.37-.63a4.13,4.13,0,0,0-1.91-3.21C22.79,14.59,24,13.49,24,12a3.76,3.76,0,0,0-1.83-3.09,5.22,5.22,0,0,0-2.52-.83H7.25a11.79,11.79,0,0,1,6.54-3.7l1.47,1.54a.87.87,0,0,0,1.22,0l1.64-1.57a11.69,11.69,0,0,1,8,5.72L25,12.64a.87.87,0,0,0,.44,1.14l2.16,1a11.46,11.46,0,0,1,.06,1.17ZM15.25,3.1a1,1,0,0,1,1.34,0,1,1,0,0,1,0,1.35,1,1,0,0,1-1.34,0,1,1,0,0,1,0-1.35Zm11.13,9a.94.94,0,0,1,1.25-.48,1,1,0,1,1-1.25.48Z"
19 | 		fill="currentColor"
20 | 	/>
21 | </svg>
22 | 


--------------------------------------------------------------------------------
/kit/src/lib/IconTensorflow.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	focusable="false"
11 | 	role="img"
12 | 	width="0.94em"
13 | 	height="1em"
14 | 	preserveAspectRatio="xMidYMid meet"
15 | 	viewBox="0 0 256 274"
16 | >
17 | 	<path
18 | 		d="M145.726 42.065v42.07l72.861 42.07v-42.07l-72.86-42.07zM0 84.135v42.07l36.43 21.03V105.17L0 84.135zm109.291 21.035l-36.43 21.034v126.2l36.43 21.035v-84.135l36.435 21.035v-42.07l-36.435-21.034V105.17z"
19 | 		fill="#E55B2D"
20 | 	/>
21 | 	<path
22 | 		d="M145.726 42.065L36.43 105.17v42.065l72.861-42.065v42.065l36.435-21.03v-84.14zM255.022 63.1l-36.435 21.035v42.07l36.435-21.035V63.1zm-72.865 84.135l-36.43 21.035v42.07l36.43-21.036v-42.07zm-36.43 63.104l-36.436-21.035v84.135l36.435-21.035V210.34z"
23 | 		fill="#ED8E24"
24 | 	/>
25 | 	<path
26 | 		d="M145.726 0L0 84.135l36.43 21.035l109.296-63.105l72.861 42.07L255.022 63.1L145.726 0zm0 126.204l-36.435 21.03l36.435 21.036l36.43-21.035l-36.43-21.03z"
27 | 		fill="#F8BF3C"
28 | 	/>
29 | </svg>
30 | 


--------------------------------------------------------------------------------
/kit/src/lib/InferenceApi.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { InferenceSnippetLang } from "./types";
 3 | 	import { onMount } from "svelte";
 4 | 	import { selectedInferenceLang } from "./stores";
 5 | 	import { getQueryParamValue, updateQueryParamAndReplaceHistory } from "./utils";
 6 | 	import IconPython from "./IconPython.svelte";
 7 | 	import IconJs from "./IconJs.svelte";
 8 | 	import IconCurl from "./IconCurl.svelte";
 9 | 
10 | 	const LANGUAGES_CONFIG: {
11 | 		id: InferenceSnippetLang;
12 | 		icon: typeof IconPython;
13 | 		label: string;
14 | 	}[] = [
15 | 		{
16 | 			id: "python",
17 | 			icon: IconPython,
18 | 			label: "Python",
19 | 		},
20 | 		{
21 | 			id: "js",
22 | 			icon: IconJs,
23 | 			label: "JavaScript",
24 | 		},
25 | 		{
26 | 			id: "curl",
27 | 			icon: IconCurl,
28 | 			label: "cURL",
29 | 		},
30 | 	];
31 | 
32 | 	export let python = false;
33 | 	export let js = false;
34 | 	export let curl = false;
35 | 
36 | 	const snippetExists = { python, js, curl };
37 | 	const queryParamKey = "code";
38 | 
39 | 	function updateSelectedOption(lang: InferenceSnippetLang) {
40 | 		$selectedInferenceLang = lang;
41 | 		updateQueryParamAndReplaceHistory(queryParamKey, lang);
42 | 	}
43 | 
44 | 	onMount(() => {
45 | 		const valueFromQueryParams = getQueryParamValue(queryParamKey) as InferenceSnippetLang | null;
46 | 		const validOptions = ["python", "js", "curl"] as InferenceSnippetLang[];
47 | 		if (valueFromQueryParams && validOptions.includes(valueFromQueryParams)) {
48 | 			$selectedInferenceLang = valueFromQueryParams;
49 | 		}
50 | 	});
51 | </script>
52 | 
53 | <div class="flex space-x-2 items-center my-1.5 mr-8 h-7 !pl-0 -mx-3 md:mx-0">
54 | 	{#each LANGUAGES_CONFIG.filter((c) => snippetExists[c.id]) as language}
55 | 		<div
56 | 			class="flex items-center border rounded-lg px-1.5 py-1 leading-none select-none text-smd
57 | 			{$selectedInferenceLang === language.id
58 | 				? 'border-gray-800 bg-black dark:bg-gray-700 text-white'
59 | 				: 'text-gray-500 cursor-pointer opacity-90 hover:text-gray-700 dark:hover:text-gray-200 hover:shadow-sm'}"
60 | 			on:click={() => updateSelectedOption(language.id)}
61 | 		>
62 | 			<svelte:component this={language.icon} classNames="mr-1.5" />
63 | 			{language.label}
64 | 		</div>
65 | 	{/each}
66 | </div>
67 | <div class="language-select">
68 | 	{#if python && $selectedInferenceLang === "python"}
69 | 		<slot name="python" />
70 | 	{/if}
71 | 	{#if js && $selectedInferenceLang === "js"}
72 | 		<slot name="js" />
73 | 	{/if}
74 | 	{#if curl && $selectedInferenceLang === "curl"}
75 | 		<slot name="curl" />
76 | 	{/if}
77 | </div>
78 | 


--------------------------------------------------------------------------------
/kit/src/lib/InferenceSnippet/IconInferenceBlackForest.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	focusable="false"
11 | 	role="img"
12 | 	width="1em"
13 | 	height="1em"
14 | 	preserveAspectRatio="xMidYMid meet"
15 | 	viewBox="0 0 26 26"
16 | >
17 | 	<path
18 | 		fill-rule="evenodd"
19 | 		clip-rule="evenodd"
20 | 		d="M13.1146 5L22.5938 18.9541L20.7344 18.9687L13.1146 7.54511L6.55208 17.528H14.6458L16.1042 18.9687C16.1042 19.0468 4 18.9541 4 18.9541L13.1146 5ZM21.3906 9.46122C21.3979 9.47585 21.6969 9.95853 22.0615 10.5436C22.4188 11.1287 22.7615 11.6918 22.9583 12.0063H19.8229L20.2458 11.3262C20.2458 11.3262 20.8365 10.3827 21.026 10.0463C21.2229 9.70988 21.3833 9.44659 21.3906 9.46122Z"
21 | 		fill="currentColor"
22 | 	/>
23 | 	<path d="M19.6305 18.9541H17.917L13.4326 12.0794H15.2555L19.6305 18.9541Z" fill="currentColor" />
24 | 	<path d="M13.224 15.9556H10.1979L11.6563 13.5787L13.224 15.9556Z" fill="currentColor" />
25 | </svg>
26 | 


--------------------------------------------------------------------------------
/kit/src/lib/InferenceSnippet/IconInferenceCerebras.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	focusable="false"
11 | 	role="img"
12 | 	width="1em"
13 | 	height="1em"
14 | 	preserveAspectRatio="xMidYMid meet"
15 | 	viewBox="0 0 26 26"
16 | 	fill="none"
17 | >
18 | 	<path
19 | 		d="M15 22C10.0294 22 6 17.9706 6 13C6 8.02939 10.0294 4 15 4M10.3635 18.5622C7.2966 15.989 6.89677 11.417 9.46998 8.35026C12.0432 5.28338 16.6151 4.88355 19.6819 7.45675M12.4088 17.8643C9.72407 16.447 8.69627 13.1212 10.1136 10.4368C11.5308 7.75157 14.8559 6.72427 17.5411 8.14156M15 16.746C12.9314 16.746 11.2543 15.0689 11.2543 13.0003C11.2543 10.9316 12.9314 9.25454 15 9.25454"
20 | 		stroke="#F15A29"
21 | 		stroke-width="1.5"
22 | 		stroke-miterlimit="10"
23 | 	/>
24 | </svg>
25 | 


--------------------------------------------------------------------------------
/kit/src/lib/InferenceSnippet/IconInferenceCohere.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	focusable="false"
11 | 	role="img"
12 | 	width="1em"
13 | 	height="1em"
14 | 	preserveAspectRatio="xMidYMid meet"
15 | 	viewBox="0 0 26 26"
16 | >
17 | 	<!-- <rect x="2.43628" y="2.43652" width="21.1274" height="21.1274" rx="3.54011" fill="#E9E6DE" /> -->
18 | 	<path
19 | 		fill-rule="evenodd"
20 | 		clip-rule="evenodd"
21 | 		d="M9.48 14.92C10.0133 14.92 11.08 14.8933 12.5733 14.28C14.3067 13.56 17.72 12.28 20.2 10.9467C21.9333 10.0133 22.68 8.78667 22.68 7.13333C22.68 4.86667 20.84 3 18.5467 3H8.94667C5.66667 3 3 5.66667 3 8.94667C3 12.2267 5.50667 14.92 9.48 14.92Z"
22 | 		fill="#39594D"
23 | 	/>
24 | 	<path
25 | 		fill-rule="evenodd"
26 | 		clip-rule="evenodd"
27 | 		d="M11.1066 19C11.1066 17.4 12.0666 15.9333 13.5599 15.32L16.5732 14.0666C19.6399 12.8133 22.9999 15.0533 22.9999 18.36C22.9999 20.92 20.9199 23 18.3599 23H15.0799C12.8932 23 11.1066 21.2133 11.1066 19Z"
28 | 		fill="#D18EE2"
29 | 	/>
30 | 	<path
31 | 		d="M6.44 15.6934C4.54667 15.6934 3 17.24 3 19.1334V19.5867C3 21.4534 4.54667 23 6.44 23C8.33333 23 9.88 21.4534 9.88 19.56V19.1067C9.85333 17.24 8.33333 15.6934 6.44 15.6934Z"
32 | 		fill="#FF7759"
33 | 	/>
34 | </svg>
35 | 


--------------------------------------------------------------------------------
/kit/src/lib/InferenceSnippet/IconInferenceFal.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	focusable="false"
11 | 	role="img"
12 | 	width="1em"
13 | 	height="1em"
14 | 	preserveAspectRatio="xMidYMid meet"
15 | 	viewBox="0 0 26 26"
16 | >
17 | 	<path
18 | 		fill-rule="evenodd"
19 | 		clip-rule="evenodd"
20 | 		d="M16.5899 2.37891C16.9579 2.37891 17.2529 2.67812 17.2881 3.04443C17.6019 6.31174 20.2023 8.91191 23.4698 9.22569C23.8361 9.26089 24.1353 9.55582 24.1353 9.92378V16.0761C24.1353 16.4441 23.8361 16.739 23.4698 16.7742C20.2023 17.088 17.6019 19.6881 17.2881 22.9555C17.2529 23.3218 16.9579 23.621 16.5899 23.621H10.4373C10.0692 23.621 9.77432 23.3218 9.73912 22.9555C9.42534 19.6881 6.82494 17.088 3.5574 16.7742C3.19109 16.739 2.89185 16.4441 2.89185 16.0761V9.92378C2.89185 9.55582 3.19109 9.26089 3.55741 9.22569C6.82494 8.91191 9.42534 6.31174 9.73912 3.04443C9.77432 2.67812 10.0692 2.37891 10.4373 2.37891H16.5899ZM7.15714 12.982C7.15714 16.5163 10.0192 19.3814 13.5498 19.3814C17.0804 19.3814 19.9426 16.5163 19.9426 12.982C19.9426 9.44762 17.0804 6.58248 13.5498 6.58248C10.0192 6.58248 7.15714 9.44762 7.15714 12.982Z"
21 | 		fill="currentColor"
22 | 	/>
23 | </svg>
24 | 


--------------------------------------------------------------------------------
/kit/src/lib/InferenceSnippet/IconInferenceFeatherless.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	focusable="false"
11 | 	role="img"
12 | 	width="1em"
13 | 	height="1em"
14 | 	preserveAspectRatio="xMidYMid meet"
15 | 	viewBox="0 0 26 26"
16 | >
17 | 	<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
18 | 		<rect x="2.43628" y="2.43652" width="21.1274" height="21.1274" rx="3.54011" fill="#0C0A09" />
19 | 		<path
20 | 			d="M21.0962 6.7616C20.2483 6.2632 19.1029 6 17.7812 6C15.7596 6 13.5312 6.6139 11.5294 7.6821L11.5152 7.6772L11.5124 7.6919C10.9068 8.0167 10.3196 8.3786 9.7685 8.7825C6.52079 11.1632 5.61129 13.9884 6.37912 15.499C5.53833 16.8794 5.02125 18.3081 5 20C6.615 17.0369 7.584 14.6359 12.8455 10.5934C11.3424 10.9035 8.74425 12.3749 6.99608 14.6079C6.83104 13.3017 7.90275 11.1926 10.2898 9.4426C10.593 9.2214 10.9068 9.0142 11.2277 8.8175C10.9769 9.5672 11.0577 9.381 10.537 10.4324C11.3063 9.7317 11.812 9.2984 12.5721 8.0979C13.5368 7.63815 14.5536 7.29388 15.6009 7.0724C15.4323 7.6093 15.1122 8.5193 14.6787 9.2389C14.6787 9.2389 15.7787 9.0121 16.6882 9.0639C16.1917 9.591 15.744 10.1622 15.2907 10.746C14.6702 11.5454 14.0284 12.3714 13.206 13.1407C13.1069 13.2338 13.0127 13.3178 12.917 13.4046C11.6534 13.2877 10.8197 13.7427 10.0377 14.5456C10.6539 14.2691 11.4827 14.0416 12.0012 14.1788C11.0449 14.9299 9.53829 15.9197 8.30083 15.8378C8.06567 16.1822 8.05079 16.1927 7.79296 16.6078C9.80108 17.0894 12.3227 15.1252 13.8067 13.7357C14.6772 12.9209 15.3402 12.0676 15.9813 11.2437C17.3002 9.5448 18.4399 8.0776 20.968 7.5197L22 7.2922L21.0962 6.7616Z"
21 | 			fill="#FFE184"
22 | 		/>
23 | 	</svg>
24 | </svg>
25 | 


--------------------------------------------------------------------------------
/kit/src/lib/InferenceSnippet/IconInferenceFireworks.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	focusable="false"
11 | 	role="img"
12 | 	width="1em"
13 | 	height="1em"
14 | 	preserveAspectRatio="xMidYMid meet"
15 | 	viewBox="0 0 26 26"
16 | >
17 | 	<path
18 | 		d="M19.7941 2.5H6.20588C4.15918 2.5 2.5 4.15918 2.5 6.20588V19.7941C2.5 21.8408 4.15918 23.5 6.20588 23.5H19.7941C21.8408 23.5 23.5 21.8408 23.5 19.7941V6.20588C23.5 4.15918 21.8408 2.5 19.7941 2.5Z"
19 | 		fill="#5019C5"
20 | 	/>
21 | 	<path
22 | 		fill-rule="evenodd"
23 | 		clip-rule="evenodd"
24 | 		d="M12.9917 14.8005C12.4958 14.8005 12.0508 14.5061 11.861 14.0503L9.57335 8.58789H10.9123L12.9995 13.5848L15.0847 8.58789H16.4237L14.1223 14.0523C13.9316 14.5061 13.4875 14.8005 12.9917 14.8005ZM15.9767 17.4106C15.4828 17.4106 15.0398 17.1181 14.8481 16.6663C14.6554 16.2105 14.7551 15.6902 15.1034 15.3371L19.2699 11.1168L19.7902 12.3442L15.9758 16.2007L21.4128 16.1704L21.9331 17.3979L15.9777 17.4125L15.9758 17.4106H15.9767ZM4.58722 16.1684L4.06689 17.3959L4.06885 17.394L10.0242 17.4076C10.5162 17.4076 10.9612 17.1162 11.1529 16.6633C11.3466 16.2085 11.2458 15.6863 10.8977 15.3342L6.73113 11.1138L6.2108 12.3413L10.0242 16.1988L4.58722 16.1684Z"
25 | 		fill="white"
26 | 	/>
27 | </svg>
28 | 


--------------------------------------------------------------------------------
/kit/src/lib/InferenceSnippet/IconInferenceGroq.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	focusable="false"
11 | 	role="img"
12 | 	width="1em"
13 | 	height="1em"
14 | 	preserveAspectRatio="xMidYMid meet"
15 | 	viewBox="0 0 26 26"
16 | >
17 | 	<rect x="2.43628" y="2.43652" width="21.1274" height="21.1274" rx="3.54011" fill="#F55036" />
18 | 	<path
19 | 		d="M13.024 6.00018C10.2759 5.97721 8.02405 8.10452 8.00019 10.751C7.97634 13.3975 10.1853 15.5662 12.9333 15.5892H14.6604V13.7927H13.024C11.3064 13.811 9.89424 12.4878 9.87516 10.8291C9.85607 9.17047 11.2301 7.81506 12.9524 7.79668C12.9762 7.79668 13.0001 7.79668 13.024 7.79668C14.7415 7.79668 16.1346 9.13831 16.1441 10.7924V15.2078C16.1441 16.8481 14.7558 18.1851 13.0573 18.2035C12.2415 18.1989 11.4639 17.8819 10.8914 17.3259L9.56982 18.5986C10.4858 19.4854 11.7263 19.9908 13.024 20H13.0907C15.8054 19.9632 17.9857 17.8405 18 15.2262V10.6729C17.9332 8.07695 15.7243 6.00478 13.024 6.00018Z"
20 | 		fill="white"
21 | 	/>
22 | </svg>
23 | 


--------------------------------------------------------------------------------
/kit/src/lib/InferenceSnippet/IconInferenceHf.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	focusable="false"
11 | 	role="img"
12 | 	width="1em"
13 | 	height="1em"
14 | 	preserveAspectRatio="xMidYMid meet"
15 | 	viewBox="0 0 26 26"
16 | >
17 | 	<rect
18 | 		x="3.34856"
19 | 		y="3.02654"
20 | 		width="19.9474"
21 | 		height="19.9474"
22 | 		rx="2.95009"
23 | 		fill="#FFD21E"
24 | 		stroke="#FFB41E"
25 | 		stroke-width="1.18004"
26 | 	/>
27 | 	<path
28 | 		fill-rule="evenodd"
29 | 		clip-rule="evenodd"
30 | 		d="M7.69336 9.74609V16.9754H9.32329V13.9595H11.8181V16.9754H13.4591V9.74609H11.8181V12.5292H9.32329V9.74609H7.69336ZM15.1646 9.74609V16.9754H16.7945V14.1702H19.3004V12.7953H16.7945V11.121H19.7217V9.74609H15.1646Z"
31 | 		fill="#814D00"
32 | 	/>
33 | </svg>
34 | 


--------------------------------------------------------------------------------
/kit/src/lib/InferenceSnippet/IconInferenceHyperbolic.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames: string = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	focusable="false"
11 | 	role="img"
12 | 	width="1em"
13 | 	height="1em"
14 | 	preserveAspectRatio="xMidYMid meet"
15 | 	viewBox="0 0 26 26"
16 | >
17 | 	<path
18 | 		d="M3.4211 4.72C3.66077 4.42 4.22 3.9 4.65939 3.58C5.09879 3.26 5.71793 3 6.03749 3C6.397 3 6.69659 3.16 6.87634 3.46C7.03612 3.7 7.67524 5.14 8.27442 6.64C8.89356 8.16 9.39287 9.58 9.39287 9.8C9.39287 10.18 9.35293 10.2 8.15458 9.9C7.45554 9.72 6.35705 9.34 5.69796 9.02C5.03887 8.7 4.16008 8.06 3.76063 7.62C3.16145 6.98 3.00167 6.64 3.00167 6.06C2.9817 5.58 3.14148 5.1 3.4211 4.72Z"
19 | 		fill="#594CE9"
20 | 	/>
21 | 	<path
22 | 		d="M17.7813 6.4C18.3406 5.02 18.9397 3.7 19.0995 3.46C19.2793 3.16 19.5988 3 19.9384 3C20.2379 3 20.8371 3.24 21.2765 3.56C21.7159 3.88 22.2552 4.34 22.4749 4.6C22.7545 4.92 22.8743 5.32 22.8743 6C22.8743 6.84 22.7745 7.08 22.1753 7.7C21.7958 8.1 20.937 8.68 20.2779 9C19.6188 9.32 18.5003 9.72 16.4831 10.2L16.6029 9.54C16.6828 9.2 17.2021 7.78 17.7813 6.4Z"
23 | 		fill="#594CE9"
24 | 	/>
25 | 	<path
26 | 		d="M4.71931 10.8C4.5795 10.3 4.39975 9.72 4.31986 9.52C4.23997 9.24 4.27991 9.16 4.45967 9.24C4.5795 9.32 5.23859 9.6 5.89769 9.86C6.55678 10.14 7.81505 10.52 8.69384 10.7C9.75238 10.92 11.2104 11.04 12.9879 11.04C14.7455 11.04 16.2434 10.92 17.282 10.7C18.1608 10.52 19.5189 10.1 20.2779 9.78C21.0568 9.48 21.6959 9.24 21.7359 9.26C21.7559 9.28 21.616 9.66 21.4363 10.1C21.1966 10.66 21.0968 11.48 21.0768 12.9C21.0768 14.36 21.1767 15.14 21.4363 15.8C21.636 16.3 21.7559 16.72 21.7359 16.74C21.6959 16.76 21.0568 16.52 20.2779 16.22C19.5189 15.9 18.1608 15.48 17.282 15.3C16.2235 15.06 14.7655 14.96 12.9879 14.96C11.2104 14.96 9.75238 15.06 8.69384 15.3C7.81505 15.48 6.47689 15.9 5.69796 16.22C4.93901 16.52 4.27991 16.76 4.25994 16.74C4.23997 16.72 4.39975 16.2 4.59947 15.6C4.83914 14.94 4.99892 13.94 4.99892 13.1C4.99892 12.34 4.87909 11.3 4.71931 10.8Z"
27 | 		fill="#594CE9"
28 | 	/>
29 | 	<path
30 | 		d="M5.69796 17C6.35705 16.68 7.43557 16.3 8.07469 16.14C9.13323 15.88 9.27304 15.9 9.33296 16.18C9.39287 16.36 9.05334 17.44 8.59397 18.6C8.13461 19.76 7.53543 21.2 7.23584 21.8C6.79645 22.7 6.59672 22.9 6.15733 22.96C5.83777 22.98 5.29851 22.82 4.95898 22.62C4.59947 22.42 4.0003 21.92 3.66077 21.52C3.14148 20.96 3.00167 20.62 3.00167 20C3.00167 19.36 3.14148 19.04 3.76063 18.38C4.16008 17.94 5.03887 17.3 5.69796 17Z"
31 | 		fill="#594CE9"
32 | 	/>
33 | 	<path
34 | 		d="M17.7813 19.6C17.2021 18.22 16.7028 16.84 16.6629 16.52L16.583 15.94L17.4817 16.06C17.981 16.14 18.9797 16.44 19.7386 16.74C20.6174 17.1 21.4163 17.62 22.0754 18.24C23.074 19.2 23.074 19.22 22.9342 20.16C22.8543 20.68 22.6346 21.28 22.4349 21.48C22.2352 21.68 21.7159 22.12 21.2765 22.44C20.8371 22.76 20.2379 23 19.9384 23C19.5788 23 19.2793 22.84 19.0995 22.56C18.9397 22.3 18.3406 20.98 17.7813 19.6Z"
35 | 		fill="#594CE9"
36 | 	/>
37 | </svg>
38 | 


--------------------------------------------------------------------------------
/kit/src/lib/InferenceSnippet/IconInferenceNebius.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames: string = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	width="1em"
 7 | 	height="1em"
 8 | 	viewBox="0 0 26 26"
 9 | 	class={classNames}
10 | 	xmlns="http://www.w3.org/2000/svg"
11 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
12 | 	aria-hidden="true"
13 | 	focusable="false"
14 | 	role="img"
15 | 	preserveAspectRatio="xMidYMid meet"
16 | >
17 | 	<rect x="3.14136" y="2.43652" width="21.1274" height="21.1274" rx="3.54011" fill="#D9FE00" />
18 | 	<path
19 | 		fill-rule="evenodd"
20 | 		clip-rule="evenodd"
21 | 		d="M22 5.2226H19V18.4781C19 18.4781 22 18.2885 22 14.6817V5.2226ZM4 11.3183V20.7701H7V7.5146C7 7.5146 8.80257 7.25164 9.75584 9.56444L13.5339 18.6933C14.1519 20.1708 15.1636 21 16.5923 21C18.021 21 19 19.7855 19 18.4842C19 18.4842 17.1974 18.7471 16.2383 16.4356L12.4661 7.30668C11.8481 5.82923 10.8364 5 9.40771 5C7.97897 5 7 6.21327 7 7.5146C6.99416 7.5146 4 7.71029 4 11.3183Z"
22 | 		fill="#002C44"
23 | 	/>
24 | </svg>
25 | 


--------------------------------------------------------------------------------
/kit/src/lib/InferenceSnippet/IconInferenceNovita.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames: string = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	width="1em"
 7 | 	height="1em"
 8 | 	viewBox="0 0 26 26"
 9 | 	class={classNames}
10 | 	xmlns="http://www.w3.org/2000/svg"
11 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
12 | 	aria-hidden="true"
13 | 	focusable="false"
14 | 	role="img"
15 | 	preserveAspectRatio="xMidYMid meet"
16 | 	version="1.2"
17 | >
18 | 	<rect x="2.43628" y="2.43652" width="21.1274" height="21.1274" rx="3.54011" fill="black" />
19 | 	<path
20 | 		d="M10.7187 5.79061C10.6923 5.80858 10.6791 6.78313 10.6835 8.13942L10.6923 10.4568C4.90331 16.3759 3.23298 18.105 3.24617 18.1274C3.25496 18.1454 4.93408 18.1589 6.97804 18.1589H10.6923C10.6923 14.5391 10.7055 13.4792 10.7275 13.4703C10.7451 13.4568 11.7956 14.5077 13.066 15.8056L15.3736 18.1589C21.1143 18.1589 22.789 18.1454 22.7978 18.123C22.811 18.105 20.1077 15.3161 16.789 11.9253C13.4703 8.53463 10.7407 5.77265 10.7187 5.79061Z"
21 | 		fill="#26D57A"
22 | 	/>
23 | </svg>
24 | 


--------------------------------------------------------------------------------
/kit/src/lib/InferenceSnippet/IconInferenceNscale.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	focusable="false"
11 | 	role="img"
12 | 	width="1em"
13 | 	height="1em"
14 | 	preserveAspectRatio="xMidYMid meet"
15 | 	viewBox="0 0 26 26"
16 | >
17 | 	<rect x="2.43628" y="2.43652" width="21.1274" height="21.1274" rx="3.54011" fill="#F6F7F8" />
18 | 	<path
19 | 		d="M22 9.10907C22 8.12421 20.818 7.62981 20.1246 8.32459L10.6151 17.852C10.4793 17.9881 10.575 18.2215 10.7667 18.2215H12.1408C12.206 18.2215 12.2711 18.2165 12.3355 18.2066L14.4558 17.8806C15.7981 17.6743 17.1644 17.6827 18.5041 17.9056L20.2984 18.204C20.3679 18.2156 20.4382 18.2214 20.5086 18.2214H21.4747C21.7648 18.2214 22 17.9847 22 17.6927V9.10907Z"
20 | 		fill="#09090B"
21 | 	/>
22 | 	<path
23 | 		opacity="0.6"
24 | 		d="M7.30146 18.2187C7.11013 18.2188 7.01423 17.986 7.14943 17.8497L13.7249 11.2215C14.1094 10.8339 14.7332 10.8337 15.118 11.221C15.5025 11.608 15.5025 12.2355 15.118 12.6226L9.85653 17.9185C9.66556 18.1107 9.40653 18.2187 9.13644 18.2187H7.30146Z"
25 | 		fill="#6B6B6D"
26 | 	/>
27 | 	<path
28 | 		opacity="0.4"
29 | 		d="M4.51022 18.2196C4.05682 18.2196 3.82952 17.668 4.1498 17.345L8.14569 13.3149C8.53008 12.9272 9.15395 12.9269 9.53872 13.3142C9.92319 13.7012 9.92319 14.3286 9.53872 14.7156L6.35585 17.9193C6.16487 18.1116 5.90585 18.2196 5.63576 18.2196H4.51022Z"
30 | 		fill="#9D9D9D"
31 | 	/>
32 | </svg>
33 | 


--------------------------------------------------------------------------------
/kit/src/lib/InferenceSnippet/IconInferenceReplicate.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	focusable="false"
11 | 	role="img"
12 | 	width="1em"
13 | 	height="1em"
14 | 	preserveAspectRatio="xMidYMid meet"
15 | 	viewBox="0 0 26 26"
16 | >
17 | 	<rect
18 | 		x="3.14136"
19 | 		y="2.43652"
20 | 		width="21.1274"
21 | 		height="21.1274"
22 | 		rx="3.54011"
23 | 		fill="url(#paint0_linear_171_78)"
24 | 	/>
25 | 	<path
26 | 		fill-rule="evenodd"
27 | 		clip-rule="evenodd"
28 | 		d="M19.9161 7.72173V6.18848H7.49072V19.8116H9.21034V7.72173H19.9161ZM19.919 9.09575V10.629H12.4584V19.8109H10.7388V9.09575H19.919ZM19.9161 11.9922V13.5342H15.7008V19.8082H13.9811V11.9922H19.9161Z"
29 | 		fill="white"
30 | 	/>
31 | 	<defs>
32 | 		<linearGradient
33 | 			id="paint0_linear_171_78"
34 | 			x1="22.9091"
35 | 			y1="3.17345"
36 | 			x2="4.19652"
37 | 			y2="22.4427"
38 | 			gradientUnits="userSpaceOnUse"
39 | 		>
40 | 			<stop stop-color="#EBFF18" />
41 | 			<stop offset="0.5" stop-color="#EB40F0" />
42 | 			<stop offset="1" stop-color="#BE0000" />
43 | 		</linearGradient>
44 | 	</defs>
45 | </svg>
46 | 


--------------------------------------------------------------------------------
/kit/src/lib/InferenceSnippet/IconInferenceSambaNova.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	focusable="false"
11 | 	role="img"
12 | 	width="1em"
13 | 	height="1em"
14 | 	preserveAspectRatio="xMidYMid meet"
15 | 	viewBox="0 0 26 26"
16 | >
17 | 	<path
18 | 		d="M23.9395 23H22.8288V9.38464C22.8288 6.5566 20.4901 4.11242 17.6039 4.11242H10.3219C7.43574 4.11242 5.10488 6.44692 5.10488 9.2828C5.10488 12.1108 7.43574 14.4454 10.3219 14.4454H11.0493C12.2695 14.4454 13.2707 15.4481 13.2707 16.6702C13.2707 17.8923 12.2695 18.8872 11.0493 18.8872H3.93945V17.7826H10.9946C11.6047 17.7826 12.1053 17.2812 12.1053 16.725C12.1053 16.114 11.6047 15.6674 10.9946 15.6674H10.2672C6.82565 15.6126 3.93945 12.7767 3.93945 9.2828C3.93945 5.78104 6.82565 3 10.3219 3H17.6587C21.1002 3 23.9395 5.94555 23.9395 9.38464V23Z"
19 | 		fill="#EE7624"
20 | 	/>
21 | 	<path
22 | 		d="M11.1041 13.6069C12.6606 13.6617 14.1624 15.0562 14.1624 16.717C14.1624 18.3856 12.7701 19.827 11.0493 19.827H3.93945V20.9394H10.9946C13.3255 20.9394 15.2652 19.0515 15.2652 16.717C15.2652 16.1137 15.1557 15.5575 14.882 15.0013C14.6551 14.5 14.2719 13.9986 13.8808 13.6069C13.435 13.223 12.9344 12.941 12.379 12.7217C11.7142 12.5023 11.0493 12.5571 10.3219 12.5023C9.93085 12.5023 9.047 12.2751 8.54641 11.9461C8.04583 11.6092 7.65474 11.1627 7.43574 10.6692C7.26366 10.2226 7.15416 9.7761 7.15416 9.27473C7.15416 7.55127 8.54641 6.16466 10.2672 6.16466H17.5961C19.3168 6.16466 20.7091 7.66878 20.7091 9.32957V22.9919H21.8198V9.3844C21.8198 7.05773 19.9348 5.05225 17.5961 5.05225H10.3219C7.99108 5.05225 6.0513 6.94022 6.0513 9.27473C6.0513 9.88577 6.16081 10.442 6.43456 10.9982C6.66139 11.4996 6.9899 12.0009 7.43574 12.3848C7.82682 12.7765 8.38216 13.0507 8.88275 13.2779C9.1565 13.3875 9.43808 13.4424 9.76659 13.4972C10.5488 13.552 11.0493 13.6069 11.1041 13.6069Z"
23 | 		fill="#EE7624"
24 | 	/>
25 | 	<path
26 | 		d="M10.9946 23H3.93945V21.8876H10.9946C13.8808 21.8876 16.2116 19.5531 16.2116 16.7172C16.2116 13.8892 13.8808 11.5546 10.9946 11.5546H10.2672C9.047 11.5546 8.04583 10.5519 8.04583 9.32981C8.04583 8.10772 9.047 7.10498 10.2672 7.10498H17.6039C18.8241 7.10498 19.8253 8.16256 19.8253 9.38465V22.9922H18.7146V9.38465C18.7146 8.78144 18.214 8.22523 17.6587 8.22523H10.3219C9.71184 8.22523 9.27383 8.7266 9.27383 9.27498C9.27383 9.83118 9.77442 10.3326 10.3845 10.3326H11.1041C14.6004 10.3326 17.4396 13.1606 17.4396 16.6075C17.3849 20.1641 14.4909 22.9922 10.9946 22.9922V23Z"
27 | 		fill="#EE7624"
28 | 	/>
29 | </svg>
30 | 


--------------------------------------------------------------------------------
/kit/src/lib/InferenceSnippet/IconInferenceTogetherAI.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	focusable="false"
11 | 	role="img"
12 | 	width="1em"
13 | 	height="1em"
14 | 	preserveAspectRatio="xMidYMid meet"
15 | 	viewBox="0 0 26 26"
16 | >
17 | 	<g clip-path="url(#clip0_55_1726)">
18 | 		<path
19 | 			d="M19.925 2.5H6.33674C4.29004 2.5 2.63086 4.15918 2.63086 6.20588V19.7941C2.63086 21.8408 4.29004 23.5 6.33674 23.5H19.925C21.9717 23.5 23.6309 21.8408 23.6309 19.7941V6.20588C23.6309 4.15918 21.9717 2.5 19.925 2.5Z"
20 | 			fill="#F1EFED"
21 | 		/>
22 | 		<path
23 | 			fill-rule="evenodd"
24 | 			clip-rule="evenodd"
25 | 			d="M17.6087 12.5368C19.6554 12.5368 21.3146 10.8776 21.3146 8.83088C21.3146 6.78418 19.6554 5.125 17.6087 5.125C15.562 5.125 13.9028 6.78418 13.9028 8.83088C13.9028 10.8776 15.562 12.5368 17.6087 12.5368ZM17.6087 21.1842C19.6554 21.1842 21.3146 19.525 21.3146 17.4783C21.3146 15.4316 19.6554 13.7725 17.6087 13.7725C15.562 13.7725 13.9028 15.4316 13.9028 17.4783C13.9028 19.525 15.562 21.1842 17.6087 21.1842ZM12.6676 17.4783C12.6676 19.525 11.0084 21.1842 8.96174 21.1842C6.91504 21.1842 5.25586 19.525 5.25586 17.4783C5.25586 15.4316 6.91504 13.7725 8.96174 13.7725C11.0084 13.7725 12.6676 15.4316 12.6676 17.4783Z"
26 | 			fill="#D3D1D1"
27 | 		/>
28 | 		<path
29 | 			d="M8.96174 12.5368C11.0084 12.5368 12.6676 10.8776 12.6676 8.83088C12.6676 6.78418 11.0084 5.125 8.96174 5.125C6.91504 5.125 5.25586 6.78418 5.25586 8.83088C5.25586 10.8776 6.91504 12.5368 8.96174 12.5368Z"
30 | 			fill="#0F6FFF"
31 | 		/>
32 | 	</g>
33 | 	<defs>
34 | 		<clipPath id="clip0_55_1726">
35 | 			<rect width="21" height="21" fill="white" transform="translate(2.63086 2.5)" />
36 | 		</clipPath>
37 | 	</defs>
38 | </svg>
39 | 


--------------------------------------------------------------------------------
/kit/src/lib/InferenceSnippet/IconLinkExternal.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	focusable="false"
11 | 	role="img"
12 | 	width="1em"
13 | 	height="1em"
14 | 	preserveAspectRatio="xMidYMid meet"
15 | 	viewBox="0 0 12 12"
16 | 	fill="currentColor"
17 | >
18 | 	<path
19 | 		fill-rule="evenodd"
20 | 		clip-rule="evenodd"
21 | 		d="M7.5 1.75H9.75C9.88807 1.75 10 1.86193 10 2V4.25C10 4.38807 9.88807 4.5 9.75 4.5C9.61193 4.5 9.5 4.38807 9.5 4.25V2.60355L6.42678 5.67678C6.32915 5.77441 6.17085 5.77441 6.07322 5.67678C5.97559 5.57915 5.97559 5.42085 6.07322 5.32322L9.14645 2.25H7.5C7.36193 2.25 7.25 2.13807 7.25 2C7.25 1.86193 7.36193 1.75 7.5 1.75Z"
22 | 		fill="currentColor"
23 | 	/>
24 | 	<path
25 | 		fill-rule="evenodd"
26 | 		clip-rule="evenodd"
27 | 		d="M6 2.5C6 2.22386 5.77614 2 5.5 2H2.69388C2.50985 2 2.33336 2.07311 2.20323 2.20323C2.0731 2.33336 2 2.50986 2 2.69389V8.93885C2 9.12288 2.0731 9.29933 2.20323 9.42953C2.33336 9.55963 2.50985 9.63273 2.69388 9.63273H8.93884C9.12287 9.63273 9.29941 9.55963 9.42951 9.42953C9.55961 9.29933 9.63271 9.12288 9.63271 8.93885V6.5C9.63271 6.22386 9.40885 6 9.13271 6C8.85657 6 8.63271 6.22386 8.63271 6.5V8.63273H3V3H5.5C5.77614 3 6 2.77614 6 2.5Z"
28 | 		fill="currentColor"
29 | 		fill-opacity="0.3"
30 | 	/>
31 | </svg>
32 | 


--------------------------------------------------------------------------------
/kit/src/lib/InferenceSnippet/IconSettings.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	focusable="false"
11 | 	role="img"
12 | 	width="1em"
13 | 	height="1em"
14 | 	preserveAspectRatio="xMidYMid meet"
15 | 	viewBox="0 0 9 7"
16 | >
17 | 	<path
18 | 		fill="currentColor"
19 | 		d="M8.537 1.153H7.361A1.445 1.445 0 0 0 5.954 0c-.689 0-1.263.49-1.407 1.153H.5v.576h4.047a1.445 1.445 0 0 0 1.407 1.153c.689 0 1.263-.49 1.407-1.153h1.176v-.576M5.954 2.305a.847.847 0 0 1-.861-.864c0-.49.373-.865.861-.865s.861.375.861.865-.373.864-.861.864M.5 5.764h1.177a1.445 1.445 0 0 0 1.406 1.152c.69 0 1.263-.49 1.407-1.152h4.047v-.577H4.49a1.445 1.445 0 0 0-1.407-1.152c-.688 0-1.263.49-1.406 1.152H.5v.577M3.083 4.61c.488 0 .862.375.862.864 0 .49-.374.865-.862.865a.847.847 0 0 1-.86-.865c0-.49.372-.864.86-.864"
20 | 	/>
21 | </svg>
22 | 


--------------------------------------------------------------------------------
/kit/src/lib/Markdown.svelte:
--------------------------------------------------------------------------------
1 | <!-- used for FrameworkContent.svelte as a slot for markdown -->
2 | <slot />
3 | 


--------------------------------------------------------------------------------
/kit/src/lib/PipelineIcon.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { PIPELINE_DATA } from "./pipeline";
 3 | 
 4 | 	import IconAudioClassification from "./PipelineIcons/IconAudioClassification.svelte";
 5 | 	import IconAudioToAudio from "./PipelineIcons/IconAudioToAudio.svelte";
 6 | 	import IconAutomaticSpeechRecognition from "./PipelineIcons/IconAutomaticSpeechRecognition.svelte";
 7 | 	import IconConversational from "./PipelineIcons/IconConversational.svelte";
 8 | 	import IconFeatureExtraction from "./PipelineIcons/IconFeatureExtraction.svelte";
 9 | 	import IconFillMask from "./PipelineIcons/IconFillMask.svelte";
10 | 	import IconImageClassification from "./PipelineIcons/IconImageClassification.svelte";
11 | 	import IconImageSegmentation from "./PipelineIcons/IconImageSegmentation.svelte";
12 | 	import IconObjectDetection from "./PipelineIcons/IconObjectDetection.svelte";
13 | 	import IconQuestionAnswering from "./PipelineIcons/IconQuestionAnswering.svelte";
14 | 	import IconSentenceSimilarity from "./PipelineIcons/IconSentenceSimilarity.svelte";
15 | 	import IconTabularClassification from "./PipelineIcons/IconTabularClassification.svelte";
16 | 	import IconTabularRegression from "./PipelineIcons/IconTabularRegression.svelte";
17 | 	import IconSummarization from "./PipelineIcons/IconSummarization.svelte";
18 | 	import IconTableQuestionAnswering from "./PipelineIcons/IconTableQuestionAnswering.svelte";
19 | 	import IconText2textGeneration from "./PipelineIcons/IconText2textGeneration.svelte";
20 | 	import IconTextClassification from "./PipelineIcons/IconTextClassification.svelte";
21 | 	import IconTextGeneration from "./PipelineIcons/IconTextGeneration.svelte";
22 | 	import IconTextToImage from "./PipelineIcons/IconTextToImage.svelte";
23 | 	import IconImageToText from "./PipelineIcons/IconImageToText.svelte";
24 | 	import IconTextToSpeech from "./PipelineIcons/IconTextToSpeech.svelte";
25 | 	import IconTokenClassification from "./PipelineIcons/IconTokenClassification.svelte";
26 | 	import IconTranslation from "./PipelineIcons/IconTranslation.svelte";
27 | 	import IconVoiceActivityDetection from "./PipelineIcons/IconVoiceActivityDetection.svelte";
28 | 	import IconZeroShotClassification from "./PipelineIcons/IconZeroShotClassification.svelte";
29 | 	import IconReinforcementLearning from "./PipelineIcons/IconReinforcementLearning.svelte";
30 | 	import IconRobotics from "./PipelineIcons/IconRobotics.svelte";
31 | 	import IconImageToImage from "./PipelineIcons/IconImageToImage.svelte";
32 | 	import IconUnconditionalImageGeneration from "./PipelineIcons/IconUnconditionalImageGeneration.svelte";
33 | 	import IconDocumentQuestionAnswering from "./PipelineIcons/IconDocumentQuestionAnswering.svelte";
34 | 
35 | 	export let classNames = "";
36 | 	export let pipeline = "";
37 | 
38 | 	type SvelteComponent = typeof IconTextClassification;
39 | 
40 | 	const ICON_COMPONENTS: Record<string, SvelteComponent> = {
41 | 		/// Keep same order as in huggingface_hub/Types.ts
42 | 		/// for easy mapping.
43 | 		"text-classification": IconTextClassification,
44 | 		"token-classification": IconTokenClassification,
45 | 		"table-question-answering": IconTableQuestionAnswering,
46 | 		"question-answering": IconQuestionAnswering,
47 | 		"zero-shot-classification": IconZeroShotClassification,
48 | 		translation: IconTranslation,
49 | 		summarization: IconSummarization,
50 | 		conversational: IconConversational,
51 | 		"feature-extraction": IconFeatureExtraction,
52 | 		"text-generation": IconTextGeneration,
53 | 		"text2text-generation": IconText2textGeneration,
54 | 		"fill-mask": IconFillMask,
55 | 		"sentence-similarity": IconSentenceSimilarity,
56 | 		"text-to-speech": IconTextToSpeech,
57 | 		"automatic-speech-recognition": IconAutomaticSpeechRecognition,
58 | 		"audio-to-audio": IconAudioToAudio,
59 | 		"audio-classification": IconAudioClassification,
60 | 		"voice-activity-detection": IconVoiceActivityDetection,
61 | 		"image-classification": IconImageClassification,
62 | 		"object-detection": IconObjectDetection,
63 | 		"image-segmentation": IconImageSegmentation,
64 | 		"text-to-image": IconTextToImage,
65 | 		"image-to-text": IconImageToText,
66 | 		"image-to-image": IconImageToImage,
67 | 		"unconditional-image-generation": IconUnconditionalImageGeneration,
68 | 		"reinforcement-learning": IconReinforcementLearning,
69 | 		robotics: IconRobotics,
70 | 		"tabular-classification": IconTabularClassification,
71 | 		"tabular-regression": IconTabularRegression,
72 | 		"document-question-answering": IconDocumentQuestionAnswering,
73 | 	};
74 | 
75 | 	const PIPELINE_TAG_ICO_CLASS = Object.fromEntries(
76 | 		Object.entries(PIPELINE_DATA).map(([tagType, data]) => [tagType, `tag-ico-${data.color}`])
77 | 	);
78 | </script>
79 | 
80 | <svelte:component
81 | 	this={ICON_COMPONENTS[pipeline] ?? IconFillMask}
82 | 	classNames="{classNames} tag-ico {PIPELINE_TAG_ICO_CLASS[pipeline]}"
83 | />
84 | 


--------------------------------------------------------------------------------
/kit/src/lib/PipelineIcons/IconAudioClassification.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	focusable="false"
11 | 	role="img"
12 | 	width="1em"
13 | 	height="1em"
14 | 	preserveAspectRatio="xMidYMid meet"
15 | 	viewBox="0 0 32 32"
16 | >
17 | 	<path
18 | 		d="M25 4H10a2.002 2.002 0 0 0-2 2v14.556A3.955 3.955 0 0 0 6 20a4 4 0 1 0 4 4V12h15v8.556A3.954 3.954 0 0 0 23 20a4 4 0 1 0 4 4V6a2.002 2.002 0 0 0-2-2zM6 26a2 2 0 1 1 2-2a2.002 2.002 0 0 1-2 2zm17 0a2 2 0 1 1 2-2a2.003 2.003 0 0 1-2 2zM10 6h15v4H10z"
19 | 		fill="currentColor"
20 | 	/>
21 | </svg>
22 | 


--------------------------------------------------------------------------------
/kit/src/lib/PipelineIcons/IconAudioToAudio.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	focusable="false"
11 | 	role="img"
12 | 	width="1em"
13 | 	height="1em"
14 | 	preserveAspectRatio="xMidYMid meet"
15 | 	viewBox="0 0 18 18"
16 | >
17 | 	<path
18 | 		fill-rule="evenodd"
19 | 		clip-rule="evenodd"
20 | 		d="M4.5 11.12H5C5.26513 11.1203 5.51933 11.2257 5.70681 11.4132C5.89429 11.6007 5.99973 11.8549 6 12.12V13.12C5.99973 13.3851 5.89429 13.6393 5.70681 13.8268C5.51933 14.0143 5.26513 14.1197 5 14.12H4.5V16.12H3.5V14.12H3C2.73486 14.1197 2.48066 14.0143 2.29319 13.8268C2.10571 13.6393 2.00026 13.3851 2 13.12V12.12C2.00026 11.8549 2.10571 11.6007 2.29319 11.4132C2.48066 11.2257 2.73486 11.1203 3 11.12H3.5V2.12H4.5V11.12ZM3 13.12H5V12.12H3V13.12ZM10 4.12H9.5V2.12H8.5V4.12H8C7.73487 4.12027 7.48067 4.22571 7.29319 4.41319C7.10571 4.60067 7.00027 4.85487 7 5.12V6.12C7.00027 6.38514 7.10571 6.63934 7.29319 6.82682C7.48067 7.01429 7.73487 7.11974 8 7.12H8.5V16.12H9.5V7.12H10C10.2651 7.11974 10.5193 7.01429 10.7068 6.82682C10.8943 6.63934 10.9997 6.38514 11 6.12V5.12C10.9997 4.85487 10.8943 4.60067 10.7068 4.41319C10.5193 4.22571 10.2651 4.12027 10 4.12ZM10 6.12H8V5.12H10V6.12ZM15 8.12H14.5V2.12H13.5V8.12H13C12.7349 8.12027 12.4807 8.22571 12.2932 8.41319C12.1057 8.60067 12.0003 8.85486 12 9.12V10.12C12.0003 10.3851 12.1057 10.6393 12.2932 10.8268C12.4807 11.0143 12.7349 11.1197 13 11.12H13.5V16.12H14.5V11.12H15C15.2651 11.1196 15.5192 11.0141 15.7067 10.8267C15.8941 10.6392 15.9996 10.3851 16 10.12V9.12C15.9997 8.85486 15.8943 8.60067 15.7068 8.41319C15.5193 8.22571 15.2651 8.12027 15 8.12ZM15 10.12H13V9.12H15V10.12Z"
21 | 		fill="currentColor"
22 | 	/>
23 | </svg>
24 | 


--------------------------------------------------------------------------------
/kit/src/lib/PipelineIcons/IconAutomaticSpeechRecognition.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	focusable="false"
11 | 	role="img"
12 | 	width="1em"
13 | 	height="1em"
14 | 	preserveAspectRatio="xMidYMid meet"
15 | 	viewBox="0 0 18 18"
16 | >
17 | 	<path
18 | 		fill-rule="evenodd"
19 | 		clip-rule="evenodd"
20 | 		d="M8.38893 3.42133C7.9778 3.14662 7.49446 3 7 3C6.33696 3 5.70108 3.26339 5.23223 3.73223C4.76339 4.20107 4.5 4.83696 4.5 5.5C4.5 5.99445 4.64662 6.4778 4.92133 6.88893C5.19603 7.30005 5.58648 7.62048 6.04329 7.8097C6.50011 7.99892 7.00278 8.04843 7.48773 7.95196C7.97268 7.8555 8.41814 7.6174 8.76777 7.26777C9.1174 6.91814 9.3555 6.47268 9.45197 5.98773C9.54843 5.50277 9.49892 5.00011 9.3097 4.54329C9.12048 4.08648 8.80005 3.69603 8.38893 3.42133ZM5.05551 2.58986C5.63108 2.20527 6.30777 2 7 2C7.92826 2 8.8185 2.36875 9.47488 3.02513C10.1313 3.6815 10.5 4.57174 10.5 5.5C10.5 6.19223 10.2947 6.86892 9.91015 7.4445C9.52556 8.02007 8.97894 8.46867 8.33939 8.73358C7.69985 8.99849 6.99612 9.0678 6.31719 8.93275C5.63825 8.7977 5.01461 8.46436 4.52513 7.97487C4.03564 7.48539 3.7023 6.86175 3.56725 6.18282C3.4322 5.50388 3.50152 4.80015 3.76642 4.16061C4.03133 3.52107 4.47993 2.97444 5.05551 2.58986ZM14.85 9.6425L15.7075 10.5C15.8005 10.5927 15.8743 10.7029 15.9245 10.8242C15.9747 10.9456 16.0004 11.0757 16 11.207V16H2V13.5C2.00106 12.5721 2.37015 11.6824 3.0263 11.0263C3.68244 10.3701 4.57207 10.0011 5.5 10H8.5C9.42793 10.0011 10.3176 10.3701 10.9737 11.0263C11.6299 11.6824 11.9989 12.5721 12 13.5V15H15V11.207L14.143 10.35C13.9426 10.4476 13.7229 10.4989 13.5 10.5C13.2033 10.5 12.9133 10.412 12.6666 10.2472C12.42 10.0824 12.2277 9.84811 12.1142 9.57403C12.0006 9.29994 11.9709 8.99834 12.0288 8.70737C12.0867 8.41639 12.2296 8.14912 12.4393 7.93934C12.6491 7.72956 12.9164 7.5867 13.2074 7.52882C13.4983 7.47094 13.7999 7.50065 14.074 7.61418C14.3481 7.72771 14.5824 7.91997 14.7472 8.16665C14.912 8.41332 15 8.70333 15 9C14.9988 9.22271 14.9475 9.44229 14.85 9.6425ZM3.73311 11.7331C3.26444 12.2018 3.00079 12.8372 3 13.5V15H11V13.5C10.9992 12.8372 10.7356 12.2018 10.2669 11.7331C9.79822 11.2644 9.1628 11.0008 8.5 11H5.5C4.8372 11.0008 4.20178 11.2644 3.73311 11.7331Z"
21 | 		fill="currentColor"
22 | 	/>
23 | </svg>
24 | 


--------------------------------------------------------------------------------
/kit/src/lib/PipelineIcons/IconConversational.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	fill="currentColor"
11 | 	focusable="false"
12 | 	role="img"
13 | 	width="1em"
14 | 	height="1em"
15 | 	preserveAspectRatio="xMidYMid meet"
16 | 	viewBox="0 0 18 18"
17 | >
18 | 	<path
19 | 		d="M10.0461 16.7125L9.1 16.1687L11.275 12.3625H14.5375C14.8259 12.3625 15.1025 12.2479 15.3065 12.044C15.5104 11.84 15.625 11.5634 15.625 11.275V4.74998C15.625 4.46156 15.5104 4.18495 15.3065 3.981C15.1025 3.77706 14.8259 3.66248 14.5375 3.66248H3.6625C3.37407 3.66248 3.09746 3.77706 2.89352 3.981C2.68957 4.18495 2.575 4.46156 2.575 4.74998V11.275C2.575 11.5634 2.68957 11.84 2.89352 12.044C3.09746 12.2479 3.37407 12.3625 3.6625 12.3625H8.55625V13.45H3.6625C3.08565 13.45 2.53243 13.2208 2.12454 12.8129C1.71665 12.405 1.4875 11.8518 1.4875 11.275V4.74998C1.4875 4.17314 1.71665 3.61992 2.12454 3.21202C2.53243 2.80413 3.08565 2.57498 3.6625 2.57498H14.5375C15.1143 2.57498 15.6676 2.80413 16.0755 3.21202C16.4833 3.61992 16.7125 4.17314 16.7125 4.74998V11.275C16.7125 11.8518 16.4833 12.405 16.0755 12.8129C15.6676 13.2208 15.1143 13.45 14.5375 13.45H11.9057L10.0461 16.7125Z"
20 | 	/>
21 | 	<path d="M4.75 5.83746H13.45V6.92496H4.75V5.83746Z" />
22 | 	<path d="M4.75 9.10004H10.1875V10.1875H4.75V9.10004Z" />
23 | </svg>
24 | 


--------------------------------------------------------------------------------
/kit/src/lib/PipelineIcons/IconDocumentQuestionAnswering.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg class={classNames} width="1em" height="1em" viewBox="0 0 32 32"
 6 | 	><path
 7 | 		fill="currentColor"
 8 | 		d="M24 30a6 6 0 1 1 6-6a6.007 6.007 0 0 1-6 6zm0-10a4 4 0 1 0 4 4a4.005 4.005 0 0 0-4-4zM8 22h8v2H8zm0-6h10v2H8z"
 9 | 	/><path
10 | 		fill="currentColor"
11 | 		d="M16 28H6V4h8v6a2.006 2.006 0 0 0 2 2h6v3h2v-5a.91.91 0 0 0-.3-.7l-7-7A.909.909 0 0 0 16 2H6a2.006 2.006 0 0 0-2 2v24a2.006 2.006 0 0 0 2 2h10Zm0-23.6l5.6 5.6H16Z"
12 | 	/></svg
13 | >
14 | 


--------------------------------------------------------------------------------
/kit/src/lib/PipelineIcons/IconFeatureExtraction.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	fill="currentColor"
11 | 	focusable="false"
12 | 	role="img"
13 | 	width="1em"
14 | 	height="1em"
15 | 	preserveAspectRatio="xMidYMid meet"
16 | 	viewBox="0 0 32 32"
17 | >
18 | 	<path
19 | 		d="M27 3H5a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0 2v4H5V5zm-10 6h10v7H17zm-2 7H5v-7h10zM5 20h10v7H5zm12 7v-7h10v7z"
20 | 	/>
21 | </svg>
22 | 


--------------------------------------------------------------------------------
/kit/src/lib/PipelineIcons/IconFillMask.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	fill="currentColor"
11 | 	focusable="false"
12 | 	role="img"
13 | 	width="1em"
14 | 	height="1em"
15 | 	preserveAspectRatio="xMidYMid meet"
16 | 	viewBox="0 0 18 19"
17 | >
18 | 	<path
19 | 		d="M12.3625 13.85H10.1875V12.7625H12.3625V10.5875H13.45V12.7625C13.4497 13.0508 13.335 13.3272 13.1312 13.5311C12.9273 13.735 12.6508 13.8497 12.3625 13.85V13.85Z"
20 | 	/>
21 | 	<path
22 | 		d="M5.8375 8.41246H4.75V6.23746C4.75029 5.94913 4.86496 5.67269 5.06884 5.4688C5.27272 5.26492 5.54917 5.15025 5.8375 5.14996H8.0125V6.23746H5.8375V8.41246Z"
23 | 	/>
24 | 	<path
25 | 		d="M15.625 5.14998H13.45V2.97498C13.4497 2.68665 13.335 2.4102 13.1312 2.20632C12.9273 2.00244 12.6508 1.88777 12.3625 1.88748H2.575C2.28666 1.88777 2.01022 2.00244 1.80633 2.20632C1.60245 2.4102 1.48778 2.68665 1.4875 2.97498V12.7625C1.48778 13.0508 1.60245 13.3273 1.80633 13.5311C2.01022 13.735 2.28666 13.8497 2.575 13.85H4.75V16.025C4.75028 16.3133 4.86495 16.5898 5.06883 16.7936C5.27272 16.9975 5.54916 17.1122 5.8375 17.1125H15.625C15.9133 17.1122 16.1898 16.9975 16.3937 16.7936C16.5975 16.5898 16.7122 16.3133 16.7125 16.025V6.23748C16.7122 5.94915 16.5975 5.6727 16.3937 5.46882C16.1898 5.26494 15.9133 5.15027 15.625 5.14998V5.14998ZM15.625 16.025H5.8375V13.85H8.0125V12.7625H5.8375V10.5875H4.75V12.7625H2.575V2.97498H12.3625V5.14998H10.1875V6.23748H12.3625V8.41248H13.45V6.23748H15.625V16.025Z"
26 | 	/>
27 | </svg>
28 | 


--------------------------------------------------------------------------------
/kit/src/lib/PipelineIcons/IconImageClassification.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	fill="currentColor"
11 | 	focusable="false"
12 | 	role="img"
13 | 	width="1em"
14 | 	height="1em"
15 | 	preserveAspectRatio="xMidYMid meet"
16 | 	viewBox="0 0 32 32"
17 | >
18 | 	<polygon points="4 20 4 22 8.586 22 2 28.586 3.414 30 10 23.414 10 28 12 28 12 20 4 20" />
19 | 	<path d="M19,14a3,3,0,1,0-3-3A3,3,0,0,0,19,14Zm0-4a1,1,0,1,1-1,1A1,1,0,0,1,19,10Z" />
20 | 	<path
21 | 		d="M26,4H6A2,2,0,0,0,4,6V16H6V6H26V21.17l-3.59-3.59a2,2,0,0,0-2.82,0L18,19.17,11.8308,13l-1.4151,1.4155L14,18l2.59,2.59a2,2,0,0,0,2.82,0L21,19l5,5v2H16v2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4Z"
22 | 	/>
23 | </svg>
24 | 


--------------------------------------------------------------------------------
/kit/src/lib/PipelineIcons/IconImageSegmentation.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	fill="currentColor"
11 | 	focusable="false"
12 | 	role="img"
13 | 	width="1em"
14 | 	height="1em"
15 | 	preserveAspectRatio="xMidYMid meet"
16 | 	viewBox="0 0 32 32"
17 | >
18 | 	<path
19 | 		d="M30,3.4141,28.5859,2,2,28.5859,3.4141,30l2-2H26a2.0027,2.0027,0,0,0,2-2V5.4141ZM26,26H7.4141l7.7929-7.793,2.3788,2.3787a2,2,0,0,0,2.8284,0L22,19l4,3.9973Zm0-5.8318-2.5858-2.5859a2,2,0,0,0-2.8284,0L19,19.1682l-2.377-2.3771L26,7.4141Z"
20 | 	/>
21 | 	<path
22 | 		d="M6,22V19l5-4.9966,1.3733,1.3733,1.4159-1.416-1.375-1.375a2,2,0,0,0-2.8284,0L6,16.1716V6H22V4H6A2.002,2.002,0,0,0,4,6V22Z"
23 | 	/>
24 | </svg>
25 | 


--------------------------------------------------------------------------------
/kit/src/lib/PipelineIcons/IconImageToImage.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	fill="currentColor"
11 | 	focusable="false"
12 | 	role="img"
13 | 	width="1em"
14 | 	height="1em"
15 | 	preserveAspectRatio="xMidYMid meet"
16 | 	viewBox="0 0 32 32"
17 | >
18 | 	<path
19 | 		fill="currentColor"
20 | 		d="M4 22H2V4a2.002 2.002 0 0 1 2-2h18v2H4zm17-5a3 3 0 1 0-3-3a3.003 3.003 0 0 0 3 3zm0-4a1 1 0 1 1-1 1a1 1 0 0 1 1-1z"
21 | 	/><path
22 | 		fill="currentColor"
23 | 		d="M28 7H9a2.002 2.002 0 0 0-2 2v19a2.002 2.002 0 0 0 2 2h19a2.002 2.002 0 0 0 2-2V9a2.002 2.002 0 0 0-2-2Zm0 21H9v-6l4-3.997l5.586 5.586a2 2 0 0 0 2.828 0L23 22.003L28 27Zm0-3.828l-3.586-3.586a2 2 0 0 0-2.828 0L20 22.172l-5.586-5.586a2 2 0 0 0-2.828 0L9 19.172V9h19Z"
24 | 	/>
25 | </svg>
26 | 


--------------------------------------------------------------------------------
/kit/src/lib/PipelineIcons/IconImageToText.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | ​
 6 | <svg
 7 | 	class={classNames}
 8 | 	xmlns="http://www.w3.org/2000/svg"
 9 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
10 | 	aria-hidden="true"
11 | 	role="img"
12 | 	width="1em"
13 | 	height="1em"
14 | 	preserveAspectRatio="xMidYMid meet"
15 | 	viewBox="0 0 32 32"
16 | >
17 | 	<path
18 | 		d="M29.707 19.293l-3-3a1 1 0 0 0-1.414 0L16 25.586V30h4.414l9.293-9.293a1 1 0 0 0 0-1.414zM19.586 28H18v-1.586l5-5L24.586 23zM26 21.586L24.414 20L26 18.414L27.586 20z"
19 | 		fill="currentColor"
20 | 	/>
21 | 	<path
22 | 		d="M20 13v-2h-2.142a3.94 3.94 0 0 0-.425-1.019l1.517-1.517l-1.414-1.414l-1.517 1.517A3.944 3.944 0 0 0 15 8.142V6h-2v2.142a3.944 3.944 0 0 0-1.019.425L10.464 7.05L9.05 8.464l1.517 1.517A3.94 3.94 0 0 0 10.142 11H8v2h2.142a3.94 3.94 0 0 0 .425 1.019L9.05 15.536l1.414 1.414l1.517-1.517a3.944 3.944 0 0 0 1.019.425V18h2v-2.142a3.944 3.944 0 0 0 1.019-.425l1.517 1.517l1.414-1.414l-1.517-1.517A3.94 3.94 0 0 0 17.858 13zm-6 1a2 2 0 1 1 2-2a2.002 2.002 0 0 1-2 2z"
23 | 		fill="currentColor"
24 | 	/>
25 | 	<path
26 | 		d="M12 30H6a2.002 2.002 0 0 1-2-2V4a2.002 2.002 0 0 1 2-2h16a2.002 2.002 0 0 1 2 2v10h-2V4H6v24h6z"
27 | 		fill="currentColor"
28 | 	/>
29 | </svg>
30 | 


--------------------------------------------------------------------------------
/kit/src/lib/PipelineIcons/IconObjectDetection.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	fill="currentColor"
11 | 	focusable="false"
12 | 	role="img"
13 | 	width="1em"
14 | 	height="1em"
15 | 	preserveAspectRatio="xMidYMid meet"
16 | 	viewBox="0 0 32 32"
17 | >
18 | 	<path
19 | 		d="M24,14a5.99,5.99,0,0,0-4.885,9.4712L14,28.5859,15.4141,30l5.1147-5.1147A5.9971,5.9971,0,1,0,24,14Zm0,10a4,4,0,1,1,4-4A4.0045,4.0045,0,0,1,24,24Z"
20 | 	/>
21 | 	<path
22 | 		d="M17,12a3,3,0,1,0-3-3A3.0033,3.0033,0,0,0,17,12Zm0-4a1,1,0,1,1-1,1A1.0009,1.0009,0,0,1,17,8Z"
23 | 	/>
24 | 	<path
25 | 		d="M12,24H4V17.9966L9,13l5.5859,5.5859L16,17.168l-5.5859-5.5855a2,2,0,0,0-2.8282,0L4,15.168V4H24v6h2V4a2.0023,2.0023,0,0,0-2-2H4A2.002,2.002,0,0,0,2,4V24a2.0023,2.0023,0,0,0,2,2h8Z"
26 | 	/>
27 | </svg>
28 | 


--------------------------------------------------------------------------------
/kit/src/lib/PipelineIcons/IconQuestionAnswering.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	width="1em"
10 | 	height="1em"
11 | 	preserveAspectRatio="xMidYMid meet"
12 | 	viewBox="0 0 32 32"
13 | >
14 | 	<path d="M2 9h9V2H2zm2-5h5v3H4z" fill="currentColor" />
15 | 	<path d="M2 19h9v-7H2zm2-5h5v3H4z" fill="currentColor" />
16 | 	<path d="M2 29h9v-7H2zm2-5h5v3H4z" fill="currentColor" />
17 | 	<path
18 | 		d="M27 9h-9l3.41-3.59L20 4l-6 6l6 6l1.41-1.41L18 11h9a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H15v2h12a3 3 0 0 0 3-3V12a3 3 0 0 0-3-3z"
19 | 		fill="currentColor"
20 | 	/>
21 | </svg>
22 | 


--------------------------------------------------------------------------------
/kit/src/lib/PipelineIcons/IconReinforcementLearning.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	fill="currentColor"
11 | 	focusable="false"
12 | 	role="img"
13 | 	width="1em"
14 | 	height="1em"
15 | 	preserveAspectRatio="xMidYMid meet"
16 | 	viewBox="0 0 32 32"
17 | >
18 | 	<path fill="currentColor" d="M18 10h2v2h-2zm-6 0h2v2h-2z" />
19 | 	<path
20 | 		fill="currentColor"
21 | 		d="M26 20h-5v-2h1a2.002 2.002 0 0 0 2-2v-4h2v-2h-2V8a2.002 2.002 0 0 0-2-2h-2V2h-2v4h-4V2h-2v4h-2a2.002 2.002 0 0 0-2 2v2H6v2h2v4a2.002 2.002 0 0 0 2 2h1v2H6a2.002 2.002 0 0 0-2 2v8h2v-8h20v8h2v-8a2.002 2.002 0 0 0-2-2ZM10 8h12v8H10Zm3 10h6v2h-6Z"
22 | 	/>
23 | </svg>
24 | 


--------------------------------------------------------------------------------
/kit/src/lib/PipelineIcons/IconRobotics.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	fill="currentColor"
11 | 	focusable="false"
12 | 	role="img"
13 | 	width="1em"
14 | 	height="1em"
15 | 	preserveAspectRatio="xMidYMid meet"
16 | 	viewBox="0 0 12 12"
17 | >
18 | 	<path
19 | 		d="M2.41562 9.48284H4.48563L1.79462 5.04284C1.61912 4.76855 1.51562 4.46427 1.51562 4.1257C1.51603 3.70884 1.67594 3.30641 1.96543 2.99375C2.25491 2.68109 2.65413 2.47963 3.08834 2.42708C3.52255 2.37454 3.96198 2.47451 4.32437 2.70829C4.68676 2.94206 4.94727 3.29361 5.05712 3.69713H6.91562V2.6257C6.91562 2.15427 7.32062 1.76855 7.81562 1.76855V2.87855L8.53112 2.19713H10.5156V3.05427H8.90012L7.81562 4.08713V4.16427L8.90012 5.19713H10.5156V6.05427H8.53112L7.81562 5.37284V6.48284C7.57693 6.48284 7.34801 6.39253 7.17923 6.23179C7.01045 6.07104 6.91562 5.85303 6.91562 5.6257V4.55427H5.05712C5.01212 4.72141 4.94012 4.87998 4.85012 5.0257L7.55012 9.48284H9.61562C9.85432 9.48284 10.0832 9.57315 10.252 9.73389C10.4208 9.89464 10.5156 10.1127 10.5156 10.34H1.51562C1.51562 9.86855 1.92062 9.48284 2.41562 9.48284ZM4.17512 5.6257C3.92312 5.76284 3.63062 5.83998 3.31562 5.83998L5.52512 9.48284H6.51063L4.17512 5.6257ZM3.31562 3.26855C3.07693 3.26855 2.84801 3.35886 2.67923 3.51961C2.51045 3.68035 2.41562 3.89837 2.41562 4.1257C2.41562 4.60141 2.81612 4.98284 3.31562 4.98284C3.81512 4.98284 4.21562 4.60141 4.21562 4.1257C4.21562 3.89837 4.1208 3.68035 3.95202 3.51961C3.78324 3.35886 3.55432 3.26855 3.31562 3.26855Z"
20 | 		fill="currentColor"
21 | 	/>
22 | </svg>
23 | 


--------------------------------------------------------------------------------
/kit/src/lib/PipelineIcons/IconSentenceSimilarity.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	fill="currentColor"
11 | 	focusable="false"
12 | 	role="img"
13 | 	width="1em"
14 | 	height="1em"
15 | 	preserveAspectRatio="xMidYMid meet"
16 | 	viewBox="0 0 32 32"
17 | >
18 | 	<path d="M30 15H17V2h-2v13H2v2h13v13h2V17h13v-2z" />
19 | 	<path d="M25.586 20L27 21.414L23.414 25L27 28.586L25.586 30l-5-5l5-5z" />
20 | 	<path
21 | 		d="M11 30H3a1 1 0 0 1-.894-1.447l4-8a1.041 1.041 0 0 1 1.789 0l4 8A1 1 0 0 1 11 30zm-6.382-2h4.764L7 23.236z"
22 | 	/>
23 | 	<path
24 | 		d="M28 12h-6a2.002 2.002 0 0 1-2-2V4a2.002 2.002 0 0 1 2-2h6a2.002 2.002 0 0 1 2 2v6a2.002 2.002 0 0 1-2 2zm-6-8v6h6.001L28 4z"
25 | 	/>
26 | 	<path d="M7 12a5 5 0 1 1 5-5a5.006 5.006 0 0 1-5 5zm0-8a3 3 0 1 0 3 3a3.003 3.003 0 0 0-3-3z" />
27 | </svg>
28 | 


--------------------------------------------------------------------------------
/kit/src/lib/PipelineIcons/IconSummarization.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	fill="currentColor"
11 | 	focusable="false"
12 | 	role="img"
13 | 	width="1em"
14 | 	height="1em"
15 | 	preserveAspectRatio="xMidYMid meet"
16 | 	viewBox="0 0 18 19"
17 | >
18 | 	<path
19 | 		d="M15.4988 8.79309L12.1819 5.47621C12.0188 5.25871 11.7469 5.14996 11.475 5.14996H7.12501C6.52688 5.14996 6.03751 5.63934 6.03751 6.23746V16.025C6.03751 16.6231 6.52688 17.1125 7.12501 17.1125H14.7375C15.3356 17.1125 15.825 16.6231 15.825 16.025V9.55434C15.825 9.28246 15.7163 9.01059 15.4988 8.79309V8.79309ZM11.475 6.23746L14.6831 9.49996H11.475V6.23746ZM7.12501 16.025V6.23746H10.3875V9.49996C10.3875 10.0981 10.8769 10.5875 11.475 10.5875H14.7375V16.025H7.12501Z"
20 | 	/>
21 | 	<path
22 | 		d="M3.8625 10.5875H2.775V2.97498C2.775 2.37686 3.26438 1.88748 3.8625 1.88748H11.475V2.97498H3.8625V10.5875Z"
23 | 	/>
24 | </svg>
25 | 


--------------------------------------------------------------------------------
/kit/src/lib/PipelineIcons/IconTableQuestionAnswering.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	fill="currentColor"
11 | 	focusable="false"
12 | 	role="img"
13 | 	width="1em"
14 | 	height="1em"
15 | 	preserveAspectRatio="xMidYMid meet"
16 | 	viewBox="0 0 18 19"
17 | >
18 | 	<path
19 | 		d="M15.825 1.88748H6.0375C5.74917 1.88777 5.47272 2.00244 5.26884 2.20632C5.06496 2.4102 4.95029 2.68665 4.95 2.97498V4.60623H2.775C2.48667 4.60652 2.21022 4.72119 2.00634 4.92507C1.80246 5.12895 1.68779 5.4054 1.6875 5.69373V16.025C1.68779 16.3133 1.80246 16.5898 2.00634 16.7936C2.21022 16.9975 2.48667 17.1122 2.775 17.1125H15.825C16.1133 17.1122 16.3898 16.9975 16.5937 16.7936C16.7975 16.5898 16.9122 16.3133 16.9125 16.025V2.97498C16.9122 2.68665 16.7975 2.4102 16.5937 2.20632C16.3898 2.00244 16.1133 1.88777 15.825 1.88748ZM6.0375 2.97498H15.825V4.60623H6.0375V2.97498ZM15.825 8.41248H11.475V5.69373H15.825V8.41248ZM6.0375 12.2187V9.49998H10.3875V12.2187H6.0375ZM10.3875 13.3062V16.025H6.0375V13.3062H10.3875ZM4.95 12.2187H2.775V9.49998H4.95V12.2187ZM10.3875 5.69373V8.41248H6.0375V5.69373H10.3875ZM11.475 9.49998H15.825V12.2187H11.475V9.49998ZM4.95 5.69373V8.41248H2.775V5.69373H4.95ZM2.775 13.3062H4.95V16.025H2.775V13.3062ZM11.475 16.025V13.3062H15.825V16.025H11.475Z"
20 | 	/>
21 | </svg>
22 | 


--------------------------------------------------------------------------------
/kit/src/lib/PipelineIcons/IconTabularClassification.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	fill="currentColor"
11 | 	focusable="false"
12 | 	role="img"
13 | 	width="1em"
14 | 	height="1em"
15 | 	preserveAspectRatio="xMidYMid meet"
16 | 	viewBox="0 0 32 32"
17 | >
18 | 	<path
19 | 		d="M29 5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2zm-2 0v4H5V5zm0 22H5v-4h22zm0-6H5v-4h22zm0-6H5v-4h22z"
20 | 		fill="currentColor"
21 | 	/>
22 | </svg>
23 | 


--------------------------------------------------------------------------------
/kit/src/lib/PipelineIcons/IconTabularRegression.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	role="img"
11 | 	width="1em"
12 | 	height="1em"
13 | 	preserveAspectRatio="xMidYMid meet"
14 | 	viewBox="0 0 32 32"
15 | >
16 | 	<path
17 | 		fill="currentColor"
18 | 		d="m4.67 28l6.39-12l7.3 6.49a2 2 0 0 0 1.7.47a2 2 0 0 0 1.42-1.07L27 10.9l-1.82-.9l-5.49 11l-7.3-6.49a2 2 0 0 0-1.68-.51a2 2 0 0 0-1.42 1L4 25V2H2v26a2 2 0 0 0 2 2h26v-2Z"
19 | 	/>
20 | </svg>
21 | 


--------------------------------------------------------------------------------
/kit/src/lib/PipelineIcons/IconText2textGeneration.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	fill="currentColor"
11 | 	focusable="false"
12 | 	role="img"
13 | 	width="1em"
14 | 	height="1em"
15 | 	preserveAspectRatio="xMidYMid meet"
16 | 	viewBox="0 0 18 18"
17 | >
18 | 	<path
19 | 		d="M4.00626 16.5125C3.46854 16.5125 2.9429 16.353 2.4958 16.0543C2.0487 15.7556 1.70024 15.3309 1.49446 14.8342C1.28868 14.3374 1.23484 13.7907 1.33975 13.2633C1.44465 12.7359 1.70359 12.2515 2.08381 11.8713C2.46403 11.4911 2.94847 11.2321 3.47586 11.1272C4.00324 11.0223 4.54989 11.0762 5.04668 11.2819C5.54346 11.4877 5.96807 11.8362 6.26681 12.2833C6.56555 12.7304 6.72501 13.256 6.72501 13.7937C6.72414 14.5145 6.43743 15.2055 5.92775 15.7152C5.41807 16.2249 4.72705 16.5116 4.00626 16.5125V16.5125ZM4.00626 12.1625C3.68363 12.1625 3.36824 12.2582 3.09998 12.4374C2.83173 12.6166 2.62264 12.8714 2.49918 13.1695C2.37571 13.4676 2.34341 13.7955 2.40635 14.112C2.46929 14.4284 2.62465 14.7191 2.85279 14.9472C3.08092 15.1753 3.37158 15.3307 3.68802 15.3936C4.00445 15.4566 4.33244 15.4243 4.63051 15.3008C4.92858 15.1773 5.18335 14.9683 5.36259 14.7C5.54184 14.4317 5.63751 14.1164 5.63751 13.7937C5.63708 13.3612 5.46507 12.9466 5.15925 12.6407C4.85342 12.3349 4.43876 12.1629 4.00626 12.1625Z"
20 | 	/>
21 | 	<path
22 | 		d="M13.25 14.3375H7.81251V13.25H13.25V9.44371H4.55001C4.26167 9.44343 3.98523 9.32876 3.78135 9.12487C3.57747 8.92099 3.4628 8.64455 3.46251 8.35621V4.54996C3.4628 4.26163 3.57747 3.98519 3.78135 3.7813C3.98523 3.57742 4.26167 3.46275 4.55001 3.46246H9.98751V4.54996H4.55001V8.35621H13.25C13.5383 8.3565 13.8148 8.47117 14.0187 8.67505C14.2226 8.87894 14.3372 9.15538 14.3375 9.44371V13.25C14.3372 13.5383 14.2226 13.8147 14.0187 14.0186C13.8148 14.2225 13.5383 14.3372 13.25 14.3375V14.3375Z"
23 | 	/>
24 | 	<path
25 | 		d="M15.425 6.72504H12.1625C11.8742 6.72475 11.5977 6.61008 11.3939 6.4062C11.19 6.20231 11.0753 5.92587 11.075 5.63754V2.37504C11.0753 2.0867 11.19 1.81026 11.3939 1.60638C11.5977 1.40249 11.8742 1.28782 12.1625 1.28754H15.425C15.7133 1.28782 15.9898 1.40249 16.1937 1.60638C16.3976 1.81026 16.5122 2.0867 16.5125 2.37504V5.63754C16.5122 5.92587 16.3976 6.20231 16.1937 6.4062C15.9898 6.61008 15.7133 6.72475 15.425 6.72504V6.72504ZM12.1625 2.37504V5.63754H15.425V2.37504H12.1625Z"
26 | 	/>
27 | </svg>
28 | 


--------------------------------------------------------------------------------
/kit/src/lib/PipelineIcons/IconTextClassification.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	fill="currentColor"
11 | 	focusable="false"
12 | 	role="img"
13 | 	width="1em"
14 | 	height="1em"
15 | 	preserveAspectRatio="xMidYMid meet"
16 | 	viewBox="0 0 32 32"
17 | 	style="transform: rotate(360deg);"
18 | >
19 | 	<circle cx="10" cy="20" r="2" fill="currentColor" />
20 | 	<circle cx="10" cy="28" r="2" fill="currentColor" />
21 | 	<circle cx="10" cy="14" r="2" fill="currentColor" />
22 | 	<circle cx="28" cy="4" r="2" fill="currentColor" />
23 | 	<circle cx="22" cy="6" r="2" fill="currentColor" />
24 | 	<circle cx="28" cy="10" r="2" fill="currentColor" />
25 | 	<circle cx="20" cy="12" r="2" fill="currentColor" />
26 | 	<circle cx="28" cy="22" r="2" fill="currentColor" />
27 | 	<circle cx="26" cy="28" r="2" fill="currentColor" />
28 | 	<circle cx="20" cy="26" r="2" fill="currentColor" />
29 | 	<circle cx="22" cy="20" r="2" fill="currentColor" />
30 | 	<circle cx="16" cy="4" r="2" fill="currentColor" />
31 | 	<circle cx="4" cy="24" r="2" fill="currentColor" />
32 | 	<circle cx="4" cy="16" r="2" fill="currentColor" />
33 | </svg>
34 | 


--------------------------------------------------------------------------------
/kit/src/lib/PipelineIcons/IconTextGeneration.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	fill="currentColor"
11 | 	focusable="false"
12 | 	role="img"
13 | 	width="1em"
14 | 	height="1em"
15 | 	preserveAspectRatio="xMidYMid meet"
16 | 	viewBox="0 0 18 18"
17 | >
18 | 	<path
19 | 		d="M16.2607 8.08202L14.468 6.28928C14.3063 6.12804 14.0873 6.03749 13.859 6.03749C13.6307 6.03749 13.4117 6.12804 13.25 6.28928L5.6375 13.904V16.9125H8.64607L16.2607 9.30002C16.422 9.13836 16.5125 8.91935 16.5125 8.69102C16.5125 8.4627 16.422 8.24369 16.2607 8.08202V8.08202ZM8.1953 15.825H6.725V14.3547L11.858 9.22118L13.3288 10.6915L8.1953 15.825ZM14.0982 9.92262L12.6279 8.45232L13.8606 7.21964L15.3309 8.68994L14.0982 9.92262Z"
20 | 	/>
21 | 	<path d="M6.18125 9.84373H7.26875V6.03748H8.9V4.94998H4.55V6.03748H6.18125V9.84373Z" />
22 | 	<path
23 | 		d="M4.55 11.475H2.375V2.775H11.075V4.95H12.1625V2.775C12.1625 2.48658 12.0479 2.20997 11.844 2.00602C11.64 1.80208 11.3634 1.6875 11.075 1.6875H2.375C2.08658 1.6875 1.80997 1.80208 1.60602 2.00602C1.40207 2.20997 1.2875 2.48658 1.2875 2.775V11.475C1.2875 11.7634 1.40207 12.04 1.60602 12.244C1.80997 12.4479 2.08658 12.5625 2.375 12.5625H4.55V11.475Z"
24 | 	/>
25 | </svg>
26 | 


--------------------------------------------------------------------------------
/kit/src/lib/PipelineIcons/IconTextToImage.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	fill="currentColor"
11 | 	focusable="false"
12 | 	role="img"
13 | 	width="1em"
14 | 	height="1em"
15 | 	preserveAspectRatio="xMidYMid meet"
16 | 	viewBox="0 0 32 32"
17 | >
18 | 	<path
19 | 		d="M29.537 13.76l-3.297-3.297a1.586 1.586 0 0 0-2.24 0L10 24.467V30h5.533l14.004-14a1.586 1.586 0 0 0 0-2.24zM14.704 28H12v-2.704l9.44-9.441l2.705 2.704zM25.56 17.145l-2.704-2.704l2.267-2.267l2.704 2.704z"
20 | 		fill="currentColor"
21 | 	/><path d="M11 17h2v-7h3V8H8v2h3v7z" fill="currentColor" /><path
22 | 		d="M8 20H4V4h16v4h2V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h4z"
23 | 		fill="currentColor"
24 | 	/>
25 | </svg>
26 | 


--------------------------------------------------------------------------------
/kit/src/lib/PipelineIcons/IconTextToSpeech.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	focusable="false"
11 | 	role="img"
12 | 	width="1em"
13 | 	height="1em"
14 | 	preserveAspectRatio="xMidYMid meet"
15 | 	viewBox="0 0 18 18"
16 | >
17 | 	<path
18 | 		fill-rule="evenodd"
19 | 		clip-rule="evenodd"
20 | 		d="M3.0625 3.0625L10 3.0625V2H3.0625C2.78071 2 2.51045 2.11194 2.3112 2.3112C2.11194 2.51046 2 2.78071 2 3.0625V11.5625C2 11.8443 2.11194 12.1145 2.3112 12.3138C2.51045 12.5131 2.78071 12.625 3.0625 12.625H7V11.5625H3.0625L3.0625 3.0625ZM5.78125 9.96875H6.84375V6.25H8.4375V5.1875H4.1875V6.25H5.78125V9.96875ZM12.5 13C13.163 13 13.7989 12.7366 14.2678 12.2678C14.7366 11.7989 15 11.163 15 10.5V5.5C15 4.83696 14.7366 4.20107 14.2678 3.73223C13.7989 3.26339 13.163 3 12.5 3C11.837 3 11.2011 3.26339 10.7322 3.73223C10.2634 4.20107 10 4.83696 10 5.5V10.5C10 11.163 10.2634 11.7989 10.7322 12.2678C11.2011 12.7366 11.837 13 12.5 13ZM11 5.5C11 5.10218 11.158 4.72064 11.4393 4.43934C11.7206 4.15804 12.1022 4 12.5 4C12.8978 4 13.2794 4.15804 13.5607 4.43934C13.842 4.72064 14 5.10218 14 5.5V10.5C14 10.8978 13.842 11.2794 13.5607 11.5607C13.2794 11.842 12.8978 12 12.5 12C12.1022 12 11.7206 11.842 11.4393 11.5607C11.158 11.2794 11 10.8978 11 10.5V5.5ZM16 9V10.5C16 11.4283 15.6313 12.3185 14.9749 12.9749C14.3185 13.6313 13.4283 14 12.5 14C11.5717 14 10.6815 13.6313 10.0251 12.9749C9.36875 12.3185 9 11.4283 9 10.5V9H8V10.5C8.00053 11.6065 8.40873 12.6741 9.14661 13.4987C9.88449 14.3232 10.9003 14.8471 12 14.97V16H10V17H15V16H13V14.97C14.0997 14.8471 15.1155 14.3232 15.8534 13.4987C16.5913 12.6741 16.9995 11.6065 17 10.5V9H16Z"
21 | 		fill="currentColor"
22 | 	/>
23 | </svg>
24 | 


--------------------------------------------------------------------------------
/kit/src/lib/PipelineIcons/IconTokenClassification.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	fill="currentColor"
11 | 	focusable="false"
12 | 	role="img"
13 | 	width="1em"
14 | 	height="1em"
15 | 	preserveAspectRatio="xMidYMid meet"
16 | 	viewBox="0 0 18 18"
17 | >
18 | 	<path d="M11.075 10.1875H12.1625V11.275H11.075V10.1875Z" />
19 | 	<path d="M15.425 9.10004H16.5125V10.1875H15.425V9.10004Z" />
20 | 	<path d="M7.8125 3.66254H8.9V4.75004H7.8125V3.66254Z" />
21 | 	<path
22 | 		d="M8.90001 12.3625H6.72501V9.09998C6.72472 8.81165 6.61005 8.5352 6.40617 8.33132C6.20228 8.12744 5.92584 8.01277 5.63751 8.01248H2.37501C2.08667 8.01277 1.81023 8.12744 1.60635 8.33132C1.40246 8.5352 1.28779 8.81165 1.28751 9.09998V12.3625C1.28779 12.6508 1.40246 12.9273 1.60635 13.1311C1.81023 13.335 2.08667 13.4497 2.37501 13.45H5.63751V15.625C5.63779 15.9133 5.75246 16.1898 5.95635 16.3936C6.16023 16.5975 6.43667 16.7122 6.72501 16.7125H8.90001C9.18834 16.7122 9.46478 16.5975 9.66867 16.3936C9.87255 16.1898 9.98722 15.9133 9.98751 15.625V13.45C9.98722 13.1616 9.87255 12.8852 9.66867 12.6813C9.46478 12.4774 9.18834 12.3628 8.90001 12.3625V12.3625ZM2.37501 12.3625V9.09998H5.63751V12.3625H2.37501ZM6.72501 15.625V13.45H8.90001V15.625H6.72501Z"
23 | 	/>
24 | 	<path
25 | 		d="M15.425 16.7125H13.25C12.9617 16.7122 12.6852 16.5976 12.4813 16.3937C12.2775 16.1898 12.1628 15.9134 12.1625 15.625V13.45C12.1628 13.1617 12.2775 12.8852 12.4813 12.6814C12.6852 12.4775 12.9617 12.3628 13.25 12.3625H15.425C15.7133 12.3628 15.9898 12.4775 16.1937 12.6814C16.3976 12.8852 16.5122 13.1617 16.5125 13.45V15.625C16.5122 15.9134 16.3976 16.1898 16.1937 16.3937C15.9898 16.5976 15.7133 16.7122 15.425 16.7125ZM13.25 13.45V15.625H15.425V13.45H13.25Z"
26 | 	/>
27 | 	<path
28 | 		d="M15.425 1.48752H12.1625C11.8742 1.48781 11.5977 1.60247 11.3938 1.80636C11.19 2.01024 11.0753 2.28668 11.075 2.57502V5.83752H9.98751C9.69917 5.83781 9.42273 5.95247 9.21885 6.15636C9.01496 6.36024 8.9003 6.63668 8.90001 6.92502V8.01252C8.9003 8.30085 9.01496 8.5773 9.21885 8.78118C9.42273 8.98506 9.69917 9.09973 9.98751 9.10002H11.075C11.3633 9.09973 11.6398 8.98506 11.8437 8.78118C12.0476 8.5773 12.1622 8.30085 12.1625 8.01252V6.92502H15.425C15.7133 6.92473 15.9898 6.81006 16.1937 6.60618C16.3976 6.4023 16.5122 6.12585 16.5125 5.83752V2.57502C16.5122 2.28668 16.3976 2.01024 16.1937 1.80636C15.9898 1.60247 15.7133 1.48781 15.425 1.48752ZM9.98751 8.01252V6.92502H11.075V8.01252H9.98751ZM12.1625 5.83752V2.57502H15.425V5.83752H12.1625Z"
29 | 	/>
30 | 	<path
31 | 		d="M4.55001 5.83752H2.37501C2.08667 5.83723 1.81023 5.72256 1.60635 5.51868C1.40246 5.3148 1.28779 5.03835 1.28751 4.75002V2.57502C1.28779 2.28668 1.40246 2.01024 1.60635 1.80636C1.81023 1.60247 2.08667 1.48781 2.37501 1.48752H4.55001C4.83834 1.48781 5.11478 1.60247 5.31867 1.80636C5.52255 2.01024 5.63722 2.28668 5.63751 2.57502V4.75002C5.63722 5.03835 5.52255 5.3148 5.31867 5.51868C5.11478 5.72256 4.83834 5.83723 4.55001 5.83752V5.83752ZM2.37501 2.57502V4.75002H4.55001V2.57502H2.37501Z"
32 | 	/>
33 | </svg>
34 | 


--------------------------------------------------------------------------------
/kit/src/lib/PipelineIcons/IconTranslation.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	fill="currentColor"
11 | 	focusable="false"
12 | 	role="img"
13 | 	width="1em"
14 | 	height="1em"
15 | 	preserveAspectRatio="xMidYMid meet"
16 | 	viewBox="0 0 18 18"
17 | >
18 | 	<path
19 | 		d="M15.7435 16.3688H16.9125L13.65 8.21251H12.3722L9.1097 16.3688H10.2788L11.1488 14.1938H14.8735L15.7435 16.3688ZM11.5838 13.1063L13.0084 9.53926L14.4385 13.1063H11.5838Z"
20 | 	/>
21 | 	<path
22 | 		d="M10.3875 4.40625V3.31875H6.58125V1.6875H5.49375V3.31875H1.6875V4.40625H7.52737C7.2261 5.64892 6.63129 6.80125 5.79281 7.76663C5.24624 7.08884 4.8246 6.31923 4.54763 5.49375H3.40575C3.74803 6.60116 4.30202 7.63159 5.037 8.52787C4.2247 9.3158 3.27338 9.94633 2.23125 10.3875L2.63906 11.3989C3.81007 10.9044 4.87658 10.1922 5.78194 9.3C6.67088 10.2044 7.73719 10.9153 8.91394 11.388L9.3 10.3875C8.25187 9.98235 7.3026 9.35754 6.516 8.55506C7.55705 7.36858 8.2892 5.94351 8.6475 4.40625H10.3875Z"
23 | 	/>
24 | </svg>
25 | 


--------------------------------------------------------------------------------
/kit/src/lib/PipelineIcons/IconUnconditionalImageGeneration.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	fill="currentColor"
11 | 	focusable="false"
12 | 	role="img"
13 | 	width="1em"
14 | 	height="1em"
15 | 	preserveAspectRatio="xMidYMid meet"
16 | 	viewBox="0 0 32 32"
17 | >
18 | 	<path
19 | 		fill="currentColor"
20 | 		d="M19 14a3 3 0 1 0-3-3a3 3 0 0 0 3 3Zm0-4a1 1 0 1 1-1 1a1 1 0 0 1 1-1Z"
21 | 	/><path
22 | 		fill="currentColor"
23 | 		d="M26 4H6a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 22H6v-6l5-5l5.59 5.59a2 2 0 0 0 2.82 0L21 19l5 5Zm0-4.83l-3.59-3.59a2 2 0 0 0-2.82 0L18 19.17l-5.59-5.59a2 2 0 0 0-2.82 0L6 17.17V6h20Z"
24 | 	/>
25 | </svg>
26 | 


--------------------------------------------------------------------------------
/kit/src/lib/PipelineIcons/IconVoiceActivityDetection.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	focusable="false"
11 | 	role="img"
12 | 	width="1em"
13 | 	height="1em"
14 | 	preserveAspectRatio="xMidYMid meet"
15 | 	viewBox="0 0 18 18"
16 | >
17 | 	<path
18 | 		fill-rule="evenodd"
19 | 		clip-rule="evenodd"
20 | 		d="M6.34483 1.96552C5.1929 1.9668 4.08852 2.42496 3.27398 3.2395C2.45945 4.05404 2.00128 5.15842 2 6.31035H2.96552C2.96552 5.4141 3.32155 4.55456 3.95529 3.92081C4.58904 3.28707 5.44858 2.93103 6.34483 2.93103C7.24108 2.93103 8.10062 3.28707 8.73436 3.92081C9.3681 4.55456 9.72414 5.4141 9.72414 6.31035C9.72587 6.90867 9.57072 7.497 9.27416 8.01667C8.97761 8.53634 8.55001 8.96919 8.034 9.27207L7.7931 9.4111V10.8946C7.79547 11.0882 7.75813 11.2802 7.68341 11.4588C7.60868 11.6374 7.49814 11.7988 7.35862 11.933C7.08012 12.2328 6.7171 12.4409 6.31768 12.5297C5.91826 12.6185 5.50128 12.5838 5.122 12.4303C4.77411 12.2798 4.47685 12.0325 4.26568 11.7177C4.0545 11.403 3.93834 11.0341 3.93103 10.6552H2.96552C2.97422 11.222 3.14591 11.7743 3.46009 12.2462C3.77426 12.718 4.21764 13.0895 4.73724 13.3161C5.08947 13.4705 5.46979 13.5503 5.85435 13.5508C6.66479 13.5337 7.43811 13.2076 8.01614 12.6393C8.25262 12.4147 8.44052 12.144 8.56823 11.8439C8.69593 11.5438 8.76073 11.2207 8.75862 10.8946V9.9571C9.35428 9.55362 9.84183 9.01013 10.1785 8.37432C10.5152 7.73851 10.6907 7.02979 10.6897 6.31035C10.6884 5.15842 10.2302 4.05404 9.41567 3.2395C8.60114 2.42496 7.49676 1.9668 6.34483 1.96552ZM10.2069 15.4828V14.5172C11.4868 14.5158 12.7139 14.0068 13.619 13.1017C14.524 12.1967 15.0331 10.9696 15.0345 9.68966H16C15.9983 11.2256 15.3875 12.6981 14.3014 13.7842C13.2153 14.8702 11.7428 15.4811 10.2069 15.4828ZM10.2069 13.5517V12.5862C10.9748 12.5853 11.7111 12.2799 12.2541 11.7368C12.7971 11.1938 13.1026 10.4576 13.1034 9.68966H14.069C14.0677 10.7135 13.6604 11.6951 12.9364 12.4191C12.2124 13.1431 11.2308 13.5504 10.2069 13.5517ZM10.2069 10.6552V11.6207C10.7189 11.6202 11.2098 11.4166 11.5718 11.0545C11.9338 10.6925 12.1374 10.2016 12.1379 9.68966H11.1724C11.1722 9.94565 11.0704 10.1911 10.8893 10.3721C10.7083 10.5531 10.4629 10.6549 10.2069 10.6552ZM6.64823 4.89281C6.43337 4.84642 6.21077 4.84944 5.99724 4.90165C5.71804 4.9704 5.46559 5.12064 5.27203 5.33328C5.07846 5.54591 4.95252 5.81132 4.91024 6.09573C4.86795 6.38015 4.91122 6.67072 5.03456 6.93047C5.15789 7.19022 5.3557 7.40741 5.60283 7.55441C5.97226 7.7669 6.27967 8.07234 6.49452 8.44039C6.70938 8.80845 6.8242 9.22631 6.82759 9.65248V10.6552H5.86207V9.65296C5.85793 9.39379 5.78607 9.1402 5.65362 8.91739C5.52117 8.69458 5.33274 8.51029 5.10703 8.38282C4.66676 8.11775 4.3219 7.71987 4.12204 7.24641C3.92217 6.77295 3.87761 6.24831 3.99476 5.74793C4.09577 5.31261 4.31683 4.91433 4.63282 4.59834C4.94882 4.28234 5.34709 4.06128 5.78241 3.96027C6.13945 3.87659 6.51077 3.87468 6.86865 3.95468C7.22652 4.03469 7.56169 4.19453 7.8491 4.42227C8.13342 4.64789 8.36295 4.93497 8.52047 5.26196C8.67799 5.58896 8.75941 5.94738 8.75862 6.31034H7.7931C7.79296 6.09052 7.74288 5.87361 7.64664 5.67598C7.55041 5.47834 7.41053 5.30515 7.23757 5.16949C7.06462 5.03382 6.8631 4.93921 6.64823 4.89281Z"
21 | 		fill="currentColor"
22 | 	/>
23 | </svg>
24 | 


--------------------------------------------------------------------------------
/kit/src/lib/PipelineIcons/IconZeroShotClassification.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let classNames = "";
 3 | </script>
 4 | 
 5 | <svg
 6 | 	class={classNames}
 7 | 	xmlns="http://www.w3.org/2000/svg"
 8 | 	xmlns:xlink="http://www.w3.org/1999/xlink"
 9 | 	aria-hidden="true"
10 | 	fill="currentColor"
11 | 	focusable="false"
12 | 	role="img"
13 | 	width="1em"
14 | 	height="1em"
15 | 	preserveAspectRatio="xMidYMid meet"
16 | 	viewBox="0 0 18 18"
17 | >
18 | 	<path
19 | 		d="M16.7125 8.75625H9.64375V1.6875H8.55625V8.75625H1.4875V9.84375H8.55625V16.9125H9.64375V9.84375H16.7125V8.75625Z"
20 | 	/>
21 | 	<path
22 | 		d="M3.11875 16.9125C2.79612 16.9125 2.48073 16.8168 2.21247 16.6376C1.94421 16.4584 1.73513 16.2036 1.61167 15.9055C1.4882 15.6074 1.4559 15.2794 1.51884 14.963C1.58178 14.6466 1.73714 14.3559 1.96528 14.1278C2.19341 13.8997 2.48407 13.7443 2.8005 13.6814C3.11694 13.6184 3.44493 13.6507 3.743 13.7742C4.04107 13.8976 4.29584 14.1067 4.47508 14.375C4.65432 14.6432 4.75 14.9586 4.75 15.2813C4.74956 15.7138 4.57756 16.1284 4.27174 16.4343C3.96591 16.7401 3.55125 16.9121 3.11875 16.9125V16.9125ZM3.11875 14.7375C3.0112 14.7375 2.90607 14.7694 2.81665 14.8291C2.72724 14.8889 2.65754 14.9738 2.61639 15.0732C2.57523 15.1725 2.56446 15.2819 2.58544 15.3873C2.60642 15.4928 2.65821 15.5897 2.73426 15.6657C2.8103 15.7418 2.90719 15.7936 3.01267 15.8146C3.11814 15.8355 3.22747 15.8248 3.32683 15.7836C3.42619 15.7425 3.51111 15.6728 3.57086 15.5834C3.63061 15.4939 3.6625 15.3888 3.6625 15.2813C3.66235 15.1371 3.60502 14.9989 3.50308 14.8969C3.40113 14.795 3.26291 14.7377 3.11875 14.7375Z"
23 | 	/>
24 | 	<path
25 | 		d="M4.75 4.95C4.42737 4.95 4.11198 4.85433 3.84372 4.67509C3.57547 4.49584 3.36639 4.24107 3.24292 3.943C3.11945 3.64493 3.08715 3.31694 3.15009 3.00051C3.21303 2.68408 3.3684 2.39342 3.59653 2.16528C3.82466 1.93715 4.11533 1.78179 4.43176 1.71884C4.74819 1.6559 5.07618 1.68821 5.37425 1.81167C5.67232 1.93514 5.92709 2.14422 6.10633 2.41248C6.28558 2.68073 6.38125 2.99612 6.38125 3.31875C6.38082 3.75125 6.20881 4.16592 5.90299 4.47174C5.59716 4.77757 5.1825 4.94957 4.75 4.95ZM4.75 2.775C4.64245 2.775 4.53733 2.80689 4.44791 2.86664C4.35849 2.92639 4.28879 3.01131 4.24764 3.11067C4.20648 3.21002 4.19572 3.31935 4.2167 3.42483C4.23768 3.53031 4.28946 3.62719 4.36551 3.70324C4.44155 3.77928 4.53844 3.83107 4.64392 3.85205C4.7494 3.87303 4.85873 3.86227 4.95808 3.82111C5.05744 3.77995 5.14236 3.71026 5.20211 3.62084C5.26186 3.53142 5.29375 3.42629 5.29375 3.31875C5.2936 3.17458 5.23627 3.03636 5.13433 2.93442C5.03239 2.83248 4.89417 2.77514 4.75 2.775Z"
26 | 	/>
27 | 	<path
28 | 		d="M12.3625 7.66875C12.0399 7.66875 11.7245 7.57308 11.4562 7.39384C11.188 7.21459 10.9789 6.95982 10.8554 6.66175C10.732 6.36368 10.6996 6.03569 10.7626 5.71926C10.8255 5.40283 10.9809 5.11217 11.209 4.88403C11.4372 4.6559 11.7278 4.50054 12.0443 4.43759C12.3607 4.37465 12.6887 4.40696 12.9867 4.53042C13.2848 4.65389 13.5396 4.86297 13.7188 5.13123C13.8981 5.39948 13.9937 5.71487 13.9937 6.0375C13.9933 6.47 13.8213 6.88467 13.5155 7.19049C13.2097 7.49632 12.795 7.66832 12.3625 7.66875ZM12.3625 5.49375C12.255 5.49375 12.1498 5.52564 12.0604 5.58539C11.971 5.64514 11.9013 5.73006 11.8601 5.82942C11.819 5.92877 11.8082 6.0381 11.8292 6.14358C11.8502 6.24906 11.902 6.34595 11.978 6.42199C12.0541 6.49803 12.1509 6.54982 12.2564 6.5708C12.3619 6.59178 12.4712 6.58102 12.5706 6.53986C12.6699 6.4987 12.7549 6.42901 12.8146 6.33959C12.8744 6.25017 12.9062 6.14504 12.9062 6.0375C12.9061 5.89333 12.8488 5.75511 12.7468 5.65317C12.6449 5.55123 12.5067 5.49389 12.3625 5.49375Z"
29 | 	/>
30 | 	<path
31 | 		d="M6.38125 7.66876C6.98186 7.66876 7.46875 7.18187 7.46875 6.58126C7.46875 5.98065 6.98186 5.49376 6.38125 5.49376C5.78064 5.49376 5.29375 5.98065 5.29375 6.58126C5.29375 7.18187 5.78064 7.66876 6.38125 7.66876Z"
32 | 	/>
33 | 	<path
34 | 		d="M6.38125 13.1063C6.98186 13.1063 7.46875 12.6194 7.46875 12.0188C7.46875 11.4181 6.98186 10.9313 6.38125 10.9313C5.78064 10.9313 5.29375 11.4181 5.29375 12.0188C5.29375 12.6194 5.78064 13.1063 6.38125 13.1063Z"
35 | 	/>
36 | 	<path
37 | 		d="M11.8187 13.1063C12.4194 13.1063 12.9062 12.6194 12.9062 12.0188C12.9062 11.4181 12.4194 10.9313 11.8187 10.9313C11.2181 10.9313 10.7312 11.4181 10.7312 12.0188C10.7312 12.6194 11.2181 13.1063 11.8187 13.1063Z"
38 | 	/>
39 | 	<path
40 | 		d="M12.3625 16.9125C12.9631 16.9125 13.45 16.4256 13.45 15.825C13.45 15.2244 12.9631 14.7375 12.3625 14.7375C11.7619 14.7375 11.275 15.2244 11.275 15.825C11.275 16.4256 11.7619 16.9125 12.3625 16.9125Z"
41 | 	/>
42 | 	<path
43 | 		d="M15.625 14.7375C16.2256 14.7375 16.7125 14.2506 16.7125 13.65C16.7125 13.0494 16.2256 12.5625 15.625 12.5625C15.0244 12.5625 14.5375 13.0494 14.5375 13.65C14.5375 14.2506 15.0244 14.7375 15.625 14.7375Z"
44 | 	/>
45 | 	<path
46 | 		d="M2.575 7.66876C3.17561 7.66876 3.6625 7.18187 3.6625 6.58126C3.6625 5.98065 3.17561 5.49376 2.575 5.49376C1.97439 5.49376 1.4875 5.98065 1.4875 6.58126C1.4875 7.18187 1.97439 7.66876 2.575 7.66876Z"
47 | 	/>
48 | 	<path
49 | 		d="M15.625 3.8625C16.2256 3.8625 16.7125 3.37561 16.7125 2.775C16.7125 2.17439 16.2256 1.6875 15.625 1.6875C15.0244 1.6875 14.5375 2.17439 14.5375 2.775C14.5375 3.37561 15.0244 3.8625 15.625 3.8625Z"
50 | 	/>
51 | </svg>
52 | 


--------------------------------------------------------------------------------
/kit/src/lib/PipelineTag.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { PIPELINE_DATA } from "./pipeline";
 3 | 	import PipelineIcon from "./PipelineIcon.svelte";
 4 | 
 5 | 	export let classNames = "";
 6 | 	export let pipeline = "";
 7 | </script>
 8 | 
 9 | <div class="inline-flex items-center border pr-1 rounded-xl {classNames}">
10 | 	<PipelineIcon classNames="mr-1" {pipeline} />
11 | 	<span>
12 | 		{PIPELINE_DATA[pipeline].name ?? pipeline}
13 | 	</span>
14 | </div>
15 | 


--------------------------------------------------------------------------------
/kit/src/lib/Question.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	import { onMount } from "svelte";
  3 | 
  4 | 	import { answers } from "./stores";
  5 | 
  6 | 	export let choices: Choice[];
  7 | 
  8 | 	interface Choice {
  9 | 		text: string;
 10 | 		explain: string;
 11 | 		correct?: boolean;
 12 | 		selected?: boolean;
 13 | 	}
 14 | 
 15 | 	const id = randomId();
 16 | 
 17 | 	let isFalse: boolean = false;
 18 | 	let isIncomplete: boolean = false;
 19 | 	let selected: number[] = [];
 20 | 	let submitted: number[] = [];
 21 | 
 22 | 	onMount(() => {
 23 | 		$answers = { ...$answers, [id]: { correct: false } };
 24 | 	});
 25 | 
 26 | 	function checkAnswer() {
 27 | 		isFalse = false;
 28 | 		isIncomplete = false;
 29 | 
 30 | 		for (let i = 0; i < choices.length; i++) {
 31 | 			const c = choices[i];
 32 | 			if (c.correct && !selected.includes(i)) {
 33 | 				isIncomplete = true;
 34 | 			} else if (!c.correct && selected.includes(i)) {
 35 | 				isFalse = true;
 36 | 			}
 37 | 		}
 38 | 		submitted = selected;
 39 | 		$answers = { ...$answers, [id]: { correct: !isIncomplete && !isFalse } };
 40 | 		const isChapterComplete = Object.values($answers).every(({ correct }) => correct);
 41 | 		if (isChapterComplete) {
 42 | 			const event = new Event("ChapterComplete");
 43 | 			window.dispatchEvent(event);
 44 | 		}
 45 | 	}
 46 | 
 47 | 	function randomId(prefix = "_"): string {
 48 | 		// Return a unique-ish random id string
 49 | 		// Math.random should be unique because of its seeding algorithm.
 50 | 		// Convert it to base 36 (numbers + letters), and grab the first 9 characters
 51 | 		// after the decimal.
 52 | 		return `${prefix}${Math.random().toString(36).substr(2, 9)}`;
 53 | 	}
 54 | </script>
 55 | 
 56 | <div>
 57 | 	<form on:submit|preventDefault={() => checkAnswer()}>
 58 | 		{#each choices as choice, index}
 59 | 			<label class="block">
 60 | 				<input
 61 | 					autocomplete="off"
 62 | 					bind:group={selected}
 63 | 					class="form-input -mt-1.5 mr-2"
 64 | 					name="choice"
 65 | 					type="checkbox"
 66 | 					value={index}
 67 | 				/>
 68 | 				{@html choice.text}
 69 | 			</label>
 70 | 			{#if submitted && submitted.includes(index)}
 71 | 				<div
 72 | 					class="alert alert-{!!choice.correct ? 'success' : 'error'} mt-1 mb-2.5 leading-normal"
 73 | 				>
 74 | 					<span class="font-bold">
 75 | 						{!!choice.correct ? "Correct!" : "Incorrect."}
 76 | 					</span>
 77 | 					{@html choice.explain}
 78 | 				</div>
 79 | 			{/if}
 80 | 		{/each}
 81 | 		<div class="flex flex-row items-center mt-3">
 82 | 			<button class="btn px-4 mr-4" type="submit" disabled={!selected.length}> Submit </button>
 83 | 
 84 | 			{#if submitted.length}
 85 | 				<div class="font-semibold leading-snug">
 86 | 					{#if isFalse}
 87 | 						<span class="text-red-900 dark:text-red-200">
 88 | 							Looks like at least one of your answers is wrong, try again!
 89 | 						</span>
 90 | 					{:else if isIncomplete}
 91 | 						<span class="text-red-900 dark:text-red-200">
 92 | 							You didn't select all the correct answers, there's more!
 93 | 						</span>
 94 | 					{:else}
 95 | 						<span class="text-green-900 dark:text-green-200"> You got all the answers! </span>
 96 | 					{/if}
 97 | 				</div>
 98 | 			{/if}
 99 | 		</div>
100 | 	</form>
101 | </div>
102 | 


--------------------------------------------------------------------------------
/kit/src/lib/Tip.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	export let warning = false;
 3 | 	const color = warning ? "orange" : "green";
 4 | </script>
 5 | 
 6 | <!-- For tailwind:
 7 | 	border-green-50 text-green-700 from-green-50 dark:from-green-900 before:border-green-500 dark:before:border-green-800
 8 | 	border-orange-50 text-orange-700 from-orange-50 dark:from-orange-900 before:border-orange-500 dark:before:border-orange-800
 9 | -->
10 | 
11 | <div
12 | 	class="course-tip {color === 'orange'
13 | 		? 'course-tip-orange'
14 | 		: ''} bg-gradient-to-br dark:bg-gradient-to-r before:border-{color}-500 dark:before:border-{color}-800 from-{color}-50 dark:from-gray-900 to-white dark:to-gray-950 border border-{color}-50 text-{color}-700 dark:text-gray-400"
15 | >
16 | 	<slot />
17 | </div>
18 | 


--------------------------------------------------------------------------------
/kit/src/lib/TokenizersLanguageContent.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { TokenizersLanguage } from "./types";
 3 | 	import { onMount } from "svelte";
 4 | 	import { selectedTokenizersLang } from "./stores";
 5 | 	import { getQueryParamValue, updateQueryParamAndReplaceHistory } from "./utils";
 6 | 	import IconPython from "./IconPython.svelte";
 7 | 	import IconRust from "./IconRust.svelte";
 8 | 	import IconNode from "./IconNode.svelte";
 9 | 
10 | 	const LANGUAGES_CONFIG: {
11 | 		id: TokenizersLanguage;
12 | 		icon: typeof IconPython;
13 | 		label: string;
14 | 	}[] = [
15 | 		{
16 | 			id: "python",
17 | 			icon: IconPython,
18 | 			label: "Python",
19 | 		},
20 | 		{
21 | 			id: "rust",
22 | 			icon: IconRust,
23 | 			label: "Rust",
24 | 		},
25 | 		{
26 | 			id: "node",
27 | 			icon: IconNode,
28 | 			label: "Node",
29 | 		},
30 | 	];
31 | 	const queryParamKey = "code";
32 | 
33 | 	export let python = false;
34 | 	export let rust = false;
35 | 	export let node = false;
36 | 
37 | 	function updateSelectedOption(lang: TokenizersLanguage) {
38 | 		$selectedTokenizersLang = lang;
39 | 		updateQueryParamAndReplaceHistory(queryParamKey, lang);
40 | 	}
41 | 
42 | 	onMount(() => {
43 | 		const valueFromQueryParams = getQueryParamValue(queryParamKey) as TokenizersLanguage | null;
44 | 		const validOptions = ["python", "js", "curl"] as TokenizersLanguage[];
45 | 		if (valueFromQueryParams && validOptions.includes(valueFromQueryParams)) {
46 | 			$selectedTokenizersLang = valueFromQueryParams;
47 | 		}
48 | 	});
49 | </script>
50 | 
51 | <div class="flex space-x-2 items-center my-1.5 mr-8 h-7 !pl-0 -mx-3 md:mx-0">
52 | 	{#each LANGUAGES_CONFIG as language}
53 | 		<div
54 | 			class="flex items-center border rounded-lg px-1.5 py-1 leading-none select-none text-smd
55 | 			{$selectedTokenizersLang === language.id
56 | 				? 'border-gray-800 bg-black dark:bg-gray-700 text-white'
57 | 				: 'text-gray-500 cursor-pointer opacity-90 hover:text-gray-700 dark:hover:text-gray-200 hover:shadow-sm'}"
58 | 			on:click={() => updateSelectedOption(language.id)}
59 | 		>
60 | 			<svelte:component this={language.icon} classNames="mr-1.5" />
61 | 			{language.label}
62 | 		</div>
63 | 	{/each}
64 | </div>
65 | <div class="language-select">
66 | 	{#if python && $selectedTokenizersLang === "python"}
67 | 		<slot name="python" />
68 | 	{/if}
69 | 	{#if rust && $selectedTokenizersLang === "rust"}
70 | 		<slot name="rust" />
71 | 	{/if}
72 | 	{#if node && $selectedTokenizersLang === "node"}
73 | 		<slot name="node" />
74 | 	{/if}
75 | </div>
76 | 


--------------------------------------------------------------------------------
/kit/src/lib/Tooltip.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	export let classNames = "";
 3 | 	export let label = "Copied";
 4 | 	export let position = "left-1/2 top-full transform -translate-x-1/2 translate-y-2";
 5 | </script>
 6 | 
 7 | <div
 8 | 	class="
 9 | 		absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow
10 | 		{position}
11 | 		{classNames}
12 | 	"
13 | >
14 | 	<div
15 | 		class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0"
16 | 		style="
17 | 				border-left-color: transparent;
18 | 				border-right-color: transparent;
19 | 			"
20 | 	/>
21 | 	{label}
22 | </div>
23 | 


--------------------------------------------------------------------------------
/kit/src/lib/TooltipFromAction.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let txt: string;
 3 | 	export let x: number;
 4 | 	export let y: number;
 5 | 	export let id: string;
 6 | </script>
 7 | 
 8 | {#if txt}
 9 | 	<div
10 | 		class="absolute text-base py-1.5 p-2 break-words bg-white border-2 border-black dark:border-gray-500 rounded shadow-alternate-xl z-50 {txt.length >
11 | 		1000
12 | 			? 'max-w-lg'
13 | 			: 'max-w-xs'}"
14 | 		style="
15 | 			top: {y + 15}px;
16 | 			left: {x + 15}px;"
17 | 		{id}
18 | 	>
19 | 		{@html txt}
20 | 	</div>
21 | {/if}
22 | 


--------------------------------------------------------------------------------
/kit/src/lib/Youtube.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	export let id: string;
 3 | </script>
 4 | 
 5 | <iframe
 6 | 	class="w-full xl:w-4/6 h-80"
 7 | 	src="https://www.youtube-nocookie.com/embed/{id}"
 8 | 	title="YouTube video player"
 9 | 	frameborder="0"
10 | 	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
11 | 	allowfullscreen
12 | />
13 | 


--------------------------------------------------------------------------------
/kit/src/lib/copyToClipboard.ts:
--------------------------------------------------------------------------------
1 | export function copyToClipboard(value: string): void {
2 | 	const textArea = document.createElement("textarea");
3 | 	document.body.appendChild(textArea);
4 | 	textArea.value = value;
5 | 	textArea.select();
6 | 	document.execCommand("copy");
7 | 	document.body.removeChild(textArea);
8 | }
9 | 


--------------------------------------------------------------------------------
/kit/src/lib/stores.ts:
--------------------------------------------------------------------------------
 1 | import type { Writable } from "svelte/store";
 2 | import { writable } from "svelte/store";
 3 | import type { Group, Framework, InferenceSnippetLang, TokenizersLanguage } from "./types";
 4 | 
 5 | // used for CodeBlockFw.svelte
 6 | const groups: Record<string, Writable<Group>> = {};
 7 | export function getGroupStore(key: string): Writable<Group> {
 8 | 	if (!groups[key]) {
 9 | 		groups[key] = writable<Group>("group1");
10 | 	}
11 | 	return groups[key];
12 | }
13 | 
14 | // used for FrameworkContent.svelte
15 | export enum AccordianState {
16 | 	OPEN = "OPEN",
17 | 	CLOSED = "CLOSED",
18 | 	HASHASHLINK = "HASHASHLINK",
19 | }
20 | const frameworks: Partial<Record<Framework, Writable<AccordianState>>> = {};
21 | export function getFrameworkStore(key: Framework): Writable<AccordianState> {
22 | 	return (frameworks[key] = frameworks[key] || writable<AccordianState>(AccordianState.OPEN));
23 | }
24 | 
25 | // used for Question.svelte
26 | export const answers = writable<{ [key: string]: { correct: boolean } }>({});
27 | 
28 | // used for InferenceApi.svelte
29 | export const selectedInferenceLang = writable<InferenceSnippetLang>("python");
30 | 
31 | // used for TokenizersLanguageContent.svelte
32 | export const selectedTokenizersLang = writable<TokenizersLanguage>("python");
33 | 
34 | // used for HfOptions.svelte
35 | export const selectedHfOptions = writable<Record<string, string>>({});
36 | 


--------------------------------------------------------------------------------
/kit/src/lib/tooltip.ts:
--------------------------------------------------------------------------------
 1 | import Tooltip from "./TooltipFromAction.svelte";
 2 | 
 3 | const id = "docstring-tooltip";
 4 | 
 5 | export function tooltip(element: HTMLElement, txt: string): any {
 6 | 	let tooltipComponent: any;
 7 | 	function mouseOver(event: MouseEvent) {
 8 | 		cleanPrevious();
 9 | 		tooltipComponent = new Tooltip({
10 | 			props: {
11 | 				txt,
12 | 				x: event.pageX,
13 | 				y: event.pageY,
14 | 				id,
15 | 			},
16 | 			target: document.body,
17 | 		});
18 | 	}
19 | 	function mouseMove(event: MouseEvent) {
20 | 		tooltipComponent.$set({
21 | 			x: event.pageX,
22 | 			y: event.pageY,
23 | 		});
24 | 	}
25 | 	function mouseLeave() {
26 | 		tooltipComponent.$destroy();
27 | 	}
28 | 
29 | 	function cleanPrevious() {
30 | 		const tooltipComponent = document.getElementById(id);
31 | 		if (tooltipComponent) {
32 | 			tooltipComponent.parentNode?.removeChild(tooltipComponent);
33 | 		}
34 | 	}
35 | 
36 | 	element.addEventListener("mouseover", mouseOver);
37 | 	element.addEventListener("mouseleave", mouseLeave);
38 | 	element.addEventListener("mousemove", mouseMove);
39 | 
40 | 	return {
41 | 		destroy() {
42 | 			element.removeEventListener("mouseover", mouseOver);
43 | 			element.removeEventListener("mouseleave", mouseLeave);
44 | 			element.removeEventListener("mousemove", mouseMove);
45 | 		},
46 | 	};
47 | }
48 | 


--------------------------------------------------------------------------------
/kit/src/lib/types.ts:
--------------------------------------------------------------------------------
 1 | export type Group = "group1" | "group2";
 2 | 
 3 | export type Framework = "pytorch" | "tensorflow" | "jax";
 4 | 
 5 | export type TokenizersLanguage = "python" | "rust" | "node";
 6 | 
 7 | export type CourseFramework = "pt" | "tf";
 8 | 
 9 | export type InferenceSnippetLang = "python" | "js" | "curl";
10 | 
11 | export interface Pipeline {
12 | 	name: string;
13 | 	subtasks?: { type: string; name: string }[];
14 | 	modality: string;
15 | 	color: string;
16 | 	hideInModels?: boolean;
17 | 	hideInDatasets?: boolean;
18 | }
19 | 


--------------------------------------------------------------------------------
/kit/src/lib/utils.ts:
--------------------------------------------------------------------------------
 1 | export function updateQueryParamAndReplaceHistory(key: string, value: string) {
 2 | 	// 1. Parse the current URL.
 3 | 	const currentUrl = new URL(window.location.href);
 4 | 	// 2. Use URLSearchParams to manipulate the query parameters.
 5 | 	const searchParams = new URLSearchParams(currentUrl.search);
 6 | 	// 3. Update the specific query parameter.
 7 | 	searchParams.set(key, value);
 8 | 	// 4. Construct the new URL.
 9 | 	currentUrl.search = searchParams.toString();
10 | 	// 5. Push the new URL to browser's history.
11 | 	history.replaceState(null, "", currentUrl.toString());
12 | }
13 | 
14 | export function getQueryParamValue(key: string) {
15 | 	// 1. Parse the current URL.
16 | 	const currentUrl = new URL(window.location.href);
17 | 	// 2. Use URLSearchParams to get the value of the specified query parameter.
18 | 	const searchParams = new URLSearchParams(currentUrl.search);
19 | 	return searchParams.get(key); // This will return the value or null if the key is not found.
20 | }
21 | 


--------------------------------------------------------------------------------
/kit/src/routes/+layout.svelte:
--------------------------------------------------------------------------------
 1 | 
 2 | <script lang="ts">
 3 | 	import { base } from "$app/paths";
 4 | 	import type { RawChapter } from "./endpoints/toc/+server";
 5 | 	import "../app.css";
 6 | 
 7 | 	export let data;
 8 | 	export let toc: RawChapter[] = data.toc ?? [];
 9 | </script>
10 | 
11 | {#if !import.meta.env.DEV}
12 | 	<slot />
13 | {:else}
14 | 	<style>
15 | 		body,
16 | 		html {
17 | 			padding: 0;
18 | 			margin: 0;
19 | 		}
20 | 	</style>
21 | 	<div
22 | 		class="flex"
23 | 	>
24 | 		<div class="w-[270px] 2xl:w-[300px] hidden md:block border-r-2 shrink-0">
25 | 			<ul class="pt-2 flex flex-col pl-3 w-full">
26 | 				{#each toc as section}
27 | 					{#if section.local}
28 | 						<a
29 | 							role="navigation"
30 | 							class="block text-gray-500 pr-2 hover:text-black dark:hover:text-gray-300 py-1"
31 | 							href="{base}/{section.local.replace(/\bindex$/, '')}">{section.title}</a
32 | 						>
33 | 					{:else}
34 | 						<span
35 | 						role="navigation"
36 | 						class="opacity-50 text-lg block text-gray-500 pr-2 hover:text-black dark:hover:text-gray-300 py-1"
37 | 						>{section.title}</span>
38 | 					{/if}
39 | 				{/each}
40 | 			</ul>
41 | 		</div>
42 | 		<div class="px-4 pt-3 grow">
43 | 			<div class="prose prose-doc dark:prose-light max-w-4xl mx-auto break-words relative">
44 | 				<slot />
45 | 			</div>
46 | 		</div>
47 | 		<div class="w-[270px] 2xl:w-[305px] hidden lg:block border-l-2 shrink-0 opacity-50 p-4">
48 | 			Sub side menu
49 | 		</div>
50 | 	</div>
51 | {/if}
52 | 


--------------------------------------------------------------------------------
/kit/src/routes/+layout.ts:
--------------------------------------------------------------------------------
 1 | import { base } from "$app/paths";
 2 | 
 3 | // This can be false if you're using a fallback (i.e. SPA mode)
 4 | export const prerender = true;
 5 | 
 6 | /** @type {import('./$types').PageLoad} */
 7 | export async function load({ fetch }) {
 8 |     if (!import.meta.env.DEV) {
 9 |         return {};
10 |     }
11 |     const toc = await fetch(base + "/endpoints/toc");
12 |     return {
13 |         toc: await toc.json()
14 |     };
15 | }


--------------------------------------------------------------------------------
/kit/src/routes/endpoints/toc/+server.ts:
--------------------------------------------------------------------------------
 1 | import path from "path";
 2 | import fs from "fs";
 3 | import yaml from "js-yaml";
 4 | import { fileURLToPath } from "url";
 5 | import { json } from '@sveltejs/kit';
 6 | 
 7 | export interface RawChapter {
 8 |   title: string;
 9 |   local?: string;
10 |   new?: boolean;
11 |   local_fw?: { pt: string; tf: string; };
12 |   quiz?: string;
13 |   sections?: RawChapter[];
14 | }
15 | 
16 | const flattener = (_flatChapters: RawChapter[], chapter: RawChapter): RawChapter[] => {
17 |   const sections = chapter?.sections as RawChapter[];
18 |   _flatChapters.push(chapter);
19 |   if (sections) {
20 |     for (const section of sections) {
21 |       flattener(_flatChapters, section);
22 |     }
23 |   }
24 |   return _flatChapters;
25 | };
26 | 
27 | export async function GET() {
28 |   const filepath = path.join(fileURLToPath(import.meta.url), '../../..', '_toctree.yml');
29 |   const content = (await fs.promises.readFile(filepath)).toString("utf-8");
30 | 
31 |   const chapters: RawChapter[] = yaml.load(content) as RawChapter[];
32 |   const chaptersFlat: RawChapter[] = chapters.reduce(flattener, []);
33 | 
34 |   return json(chaptersFlat);
35 | }
36 | 


--------------------------------------------------------------------------------
/kit/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/doc-builder/0967fa8065bbe9b5b1c7599f8109014064e3b6e6/kit/static/favicon.png


--------------------------------------------------------------------------------
/kit/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import adapter from "@sveltejs/adapter-static";
 2 | import { vitePreprocess } from "@sveltejs/kit/vite";
 3 | 
 4 | import {
 5 | 	docstringPreprocess,
 6 | 	frameworkcontentPreprocess,
 7 | 	mdsvexPreprocess,
 8 | 	inferenceSnippetPreprocess,
 9 | 	tokenizersLangPreprocess,
10 | 	hfOptionsPreprocess,
11 | 	hashInCodePreprocess,
12 | } from "./preprocessors/index.js";
13 | 
14 | /** @type {import('@sveltejs/kit').Config} */
15 | const config = {
16 | 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
17 | 	// for more information about preprocessors
18 | 	preprocess: [
19 | 		hashInCodePreprocess,
20 | 		docstringPreprocess,
21 | 		frameworkcontentPreprocess,
22 | 		inferenceSnippetPreprocess,
23 | 		tokenizersLangPreprocess,
24 | 		hfOptionsPreprocess,
25 | 		mdsvexPreprocess,
26 | 		vitePreprocess({}),
27 | 	],
28 | 
29 | 	kit: {
30 | 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
31 | 		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
32 | 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
33 | 		adapter: adapter({ strict: false }),
34 | 
35 | 		prerender: {
36 | 			crawl: false, // Do not throw if linked page doesn't exist (eg when forgetting the language prefix)
37 | 		},
38 | 
39 | 		paths: {
40 | 			base: process.argv.includes("dev")
41 | 				? ""
42 | 				: "/docs/" +
43 | 				  (process.env.DOCS_LIBRARY || "transformers") +
44 | 				  "/" +
45 | 				  (process.env.DOCS_VERSION || "main") +
46 | 				  "/" +
47 | 				  (process.env.DOCS_LANGUAGE || "en"),
48 | 			relative: false,
49 | 		},
50 | 	},
51 | 
52 | 	onwarn: (warning, handler) => {
53 | 		if (
54 | 			warning.message.includes("has unused export property 'fw'") ||
55 | 			warning.message.includes("A11y")
56 | 		) {
57 | 			/// Too noisy
58 | 			return;
59 | 		}
60 | 		handler(warning);
61 | 	},
62 | };
63 | 
64 | export default config;
65 | 


--------------------------------------------------------------------------------
/kit/svelteKitCustomClient/README.md:
--------------------------------------------------------------------------------
 1 | # Custom `sveltekit client.js` file
 2 | 
 3 | Sveltekit handles [internal routes](https://kit.svelte.dev/docs/routing) by:
 4 | 
 5 | 1. partially loading changed components
 6 | 2. updating the browser's [history](https://developer.mozilla.org/en-US/docs/Web/API/History)
 7 | 
 8 | which makes the user experience better by not loading/reloading pages completely from scratch.
 9 | 
10 | ### Hugging Face docs
11 | 
12 | In [hf docs](https://huggingface.co/docs), we have these redirection rules:
13 | 
14 | ```
15 | hf.co/docs/lib/page -> hf.co/docs/lib/default_version/default_lang/page
16 | hf.co/docs/lib/version/page -> hf.co/docs/lib/version/default_lang/page
17 | ```
18 | 
19 | However, these rules were being handled as external routes by SvelteKit without taking advantage of partial reloadings. I've tried using [$app/navigation](https://kit.svelte.dev/docs/modules#$app-navigation) without success. Therefore, the simplest solution was: overwriting [sveltekit client.js](https://github.com/sveltejs/kit/blob/master/packages/kit/src/runtime/client/client.js) to handle hf doc routes accordingly.
20 | 
21 | Specifically, this [custom client.js](https://github.com/huggingface/doc-builder/blob/ab03d33801595579591ac8cdc49514c4f59fe068/kit/svelteKitCustomClient/client.js) is identical to [sveltekit client.js](https://github.com/sveltejs/kit/blob/master/packages/kit/src/runtime/client/client.js) with only one difference: addition and usage of [getHfDocFullPath function](https://github.com/huggingface/doc-builder/blob/ab03d33801595579591ac8cdc49514c4f59fe068/kit/svelteKitCustomClient/client.js#L43), which makes it possible for hf redirected paths (as described above) to be considered as `internal routes` and take full advantage of partial loading.
22 | 


--------------------------------------------------------------------------------
/kit/svelteKitCustomClient/replace.js:
--------------------------------------------------------------------------------
 1 | import fs from "fs";
 2 | import path from "path";
 3 | import { runtime_directory } from "../node_modules/@sveltejs/kit/src/core/utils.js";
 4 | 
 5 | // Step 1: replace client.js
 6 | const sourceFilePathClient = path.resolve("./svelteKitCustomClient/client.js");
 7 | const destinationFilePathClient = path.join(runtime_directory, "client/client.js");
 8 | fs.copyFileSync(sourceFilePathClient, destinationFilePathClient);
 9 | 
10 | // Step 2: export hf doc const env vars
11 | const sourceFilePathConsts = path.join(runtime_directory, "client/hfDocConsts.js");
12 | const constsString = `export const DOCS_LIBRARY = "${process.env.DOCS_LIBRARY}";
13 | export const DOCS_VERSION = "${process.env.DOCS_VERSION}";
14 | export const DOCS_LANGUAGE = "${process.env.DOCS_LANGUAGE}";`;
15 | fs.writeFileSync(sourceFilePathConsts, constsString, "utf8");
16 | 


--------------------------------------------------------------------------------
/kit/tailwind.config.cjs:
--------------------------------------------------------------------------------
  1 | const defaultTheme = require("tailwindcss/defaultTheme");
  2 | const colors = require("tailwindcss/colors");
  3 | 
  4 | module.exports = {
  5 | 	content: ["./src/**/*.{svelte,ts,mdx}"],
  6 | 
  7 | 	darkMode: "class",
  8 | 	theme: {
  9 | 		container: {
 10 | 			center: true,
 11 | 			padding: { DEFAULT: "1rem" },
 12 | 		},
 13 | 		extend: {
 14 | 			colors: {
 15 | 				orange: colors.orange,
 16 | 				teal: colors.teal,
 17 | 				sky: colors.sky,
 18 | 				violet: colors.violet,
 19 | 				fuchsia: colors.fuchsia,
 20 | 				pink: colors.pink,
 21 | 				lime: colors.lime,
 22 | 				cyan: colors.cyan,
 23 | 				gray: {
 24 | 					350: "#b3bcc9",
 25 | 					// Dark blue
 26 | 					// 925: '#131f3d',
 27 | 					// 950: '#0a1226',
 28 | 					// Darker
 29 | 					850: "#141c2e",
 30 | 					925: "#101623",
 31 | 					950: "#0b0f19",
 32 | 					// Darkest
 33 | 					// 925: '#081122',
 34 | 					// 950: '#000511',
 35 | 				},
 36 | 			},
 37 | 			maxWidth: {
 38 | 				"2xs": "16rem",
 39 | 			},
 40 | 			screens: {
 41 | 				"with-hover": { raw: "(hover: hover)" },
 42 | 				"no-hover": { raw: "(hover: none)" },
 43 | 			},
 44 | 			gridTemplateRows: {
 45 | 				full: "100%",
 46 | 			},
 47 | 			fontFamily: {
 48 | 				sans: ["Source Sans Pro", ...defaultTheme.fontFamily.sans],
 49 | 				mono: ["IBM Plex Mono", ...defaultTheme.fontFamily.mono],
 50 | 				serif: ["Charter", ...defaultTheme.fontFamily.serif],
 51 | 			},
 52 | 			fontSize: {
 53 | 				smd: "0.94rem",
 54 | 			},
 55 | 			typography: (theme) => ({
 56 | 				light: {
 57 | 					css: [
 58 | 						{
 59 | 							color: theme("colors.gray.350"),
 60 | 							'[class~="lead"]': {
 61 | 								color: theme("colors.gray.300"),
 62 | 							},
 63 | 							a: {
 64 | 								color: theme("colors.gray.300"),
 65 | 							},
 66 | 							strong: {
 67 | 								color: theme("colors.gray.300"),
 68 | 							},
 69 | 							"ol > li::before": {
 70 | 								color: theme("colors.gray.400"),
 71 | 							},
 72 | 							"ul > li::before": {
 73 | 								backgroundColor: theme("colors.gray.600"),
 74 | 							},
 75 | 							hr: {
 76 | 								borderColor: theme("colors.gray.200"),
 77 | 							},
 78 | 							blockquote: {
 79 | 								color: theme("colors.gray.200"),
 80 | 								borderLeftColor: theme("colors.gray.600"),
 81 | 							},
 82 | 							h1: {
 83 | 								color: theme("colors.gray.200"),
 84 | 							},
 85 | 							h2: {
 86 | 								color: theme("colors.gray.200"),
 87 | 							},
 88 | 							h3: {
 89 | 								color: theme("colors.gray.200"),
 90 | 							},
 91 | 							h4: {
 92 | 								color: theme("colors.gray.200"),
 93 | 							},
 94 | 							"figure figcaption": {
 95 | 								color: theme("colors.gray.400"),
 96 | 							},
 97 | 							code: {
 98 | 								color: theme("colors.gray.300"),
 99 | 							},
100 | 							"a code": {
101 | 								color: theme("colors.gray.300"),
102 | 							},
103 | 							pre: {
104 | 								color: theme("colors.gray.300"),
105 | 								backgroundColor: theme("colors.gray.925"),
106 | 							},
107 | 							thead: {
108 | 								color: theme("colors.gray.200"),
109 | 								borderBottomColor: theme("colors.gray.400"),
110 | 							},
111 | 							"tbody tr": {
112 | 								borderBottomColor: theme("colors.gray.600"),
113 | 							},
114 | 						},
115 | 					],
116 | 				},
117 | 				DEFAULT: {
118 | 					css: {
119 | 						color: colors.gray[600],
120 | 						maxWidth: "100%",
121 | 						fontSize: "1.05rem",
122 | 						h1: {
123 | 							fontSize: theme("fontSize.xl")[0],
124 | 							color: theme("colors.gray.700"),
125 | 							marginBottom: "1.7rem",
126 | 							fontWeight: 600,
127 | 						},
128 | 						h2: {
129 | 							fontSize: theme("fontSize.xl")[0],
130 | 							color: theme("colors.gray.700"),
131 | 							fontWeight: 600,
132 | 						},
133 | 
134 | 						h3: {
135 | 							fontSize: theme("fontSize.xl")[0],
136 | 							color: theme("colors.gray.700"),
137 | 							fontWeight: 600,
138 | 						},
139 | 						h4: {
140 | 							fontSize: theme("fontSize.lg")[0],
141 | 							color: theme("colors.gray.700"),
142 | 							fontWeight: 600,
143 | 						},
144 | 						pre: {
145 | 							color: "currentColor",
146 | 							backgroundColor: theme("colors.gray.50"),
147 | 						},
148 | 					},
149 | 				},
150 | 			}),
151 | 			zIndex: {
152 | 				5: "5",
153 | 				2: "2",
154 | 				1: "1",
155 | 				"-1": "-1",
156 | 			},
157 | 		},
158 | 	},
159 | 	plugins: [
160 | 		require("@tailwindcss/forms"),
161 | 		require("@tailwindcss/typography"),
162 | 		require("@tailwindcss/aspect-ratio"),
163 | 	],
164 | };
165 | 


--------------------------------------------------------------------------------
/kit/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"extends": "./.svelte-kit/tsconfig.json",
 3 | 	"compilerOptions": {
 4 | 		"allowJs": true,
 5 | 		"checkJs": true,
 6 | 		"esModuleInterop": true,
 7 | 		"forceConsistentCasingInFileNames": true,
 8 | 		"resolveJsonModule": true,
 9 | 		"skipLibCheck": true,
10 | 		"sourceMap": true,
11 | 		"strict": true
12 | 	}
13 | 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
14 | 	//
15 | 	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
16 | 	// from the referenced tsconfig.json - TypeScript does not merge them in
17 | }
18 | 


--------------------------------------------------------------------------------
/kit/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { sveltekit } from "@sveltejs/kit/vite";
 2 | import { defineConfig } from "vite";
 3 | 
 4 | export default defineConfig({
 5 | 	plugins: [sveltekit()],
 6 | 	build: {
 7 | 		sourcemap: Boolean(process.env.DOCS_SOURCEMAP),
 8 | 	},
 9 | });
10 | 


--------------------------------------------------------------------------------
/pyproject.toml:
--------------------------------------------------------------------------------
1 | [tool.black]
2 | line-length = 119
3 | target-version = ['py39']
4 | 


--------------------------------------------------------------------------------
/scripts/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"tabWidth": 2,
3 | 	"useTabs": true,
4 | 	"printWidth": 120
5 | }
6 | 


--------------------------------------------------------------------------------
/scripts/delete-old-prs.ts:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env -S deno run --allow-env --allow-net --allow-run --allow-read
 2 | // To format: npx prettier --write .
 3 | import { commit, listFiles } from "npm:@huggingface/hub@0.15.1";
 4 | 
 5 | const oneMonthAgo = new Date(Date.now() - 30 * 24 * 3600 * 1000);
 6 | 
 7 | const allFiles = listFiles({
 8 | 	repo: { type: "dataset", name: "hf-doc-build/doc-build-dev" },
 9 | 	recursive: true,
10 | 	expand: true,
11 | });
12 | 
13 | const filesToDelete: string[] = [];
14 | 
15 | let fileCount = 0;
16 | let filesWithoutDates = 0;
17 | 
18 | for await (const file of allFiles) {
19 | 	fileCount++;
20 | 	
21 | 	if (file.type !== "file" || !file.path.endsWith(".zip")) {
22 | 		continue;
23 | 	}
24 | 
25 | 	const date = file.lastCommit?.date;
26 | 
27 | 	if (!date) {
28 | 		filesWithoutDates++;
29 | 		continue;
30 | 	}
31 | 
32 | 	if (oneMonthAgo < new Date(date)) {
33 | 		continue;
34 | 	}
35 | 
36 | 	filesToDelete.push(file.path);
37 | }
38 | 
39 | console.log({fileCount, filesWithoutDates});
40 | 
41 | if (filesToDelete.length) {
42 | 	console.log("deleting", filesToDelete.length, "files");
43 | 	await commit({
44 | 		repo: { type: "dataset", name: "hf-doc-build/doc-build-dev" },
45 | 		credentials: { accessToken: Deno.env.get("HF_ACCESS_TOKEN") },
46 | 		title: "Delete old docs",
47 | 		operations: filesToDelete.map((file) => ({
48 | 			operation: "delete",
49 | 			path: file,
50 | 		})),
51 | 	});
52 | }
53 | 


--------------------------------------------------------------------------------
/setup.cfg:
--------------------------------------------------------------------------------
 1 | [isort]
 2 | default_section = FIRSTPARTY
 3 | ensure_newline_before_comments = True
 4 | force_grid_wrap = 0
 5 | include_trailing_comma = True
 6 | known_first_party = transformers
 7 | line_length = 119
 8 | lines_after_imports = 2
 9 | multi_line_output = 3
10 | use_parentheses = True
11 | 
12 | [flake8]
13 | ignore = E203, E501, E741, W503, W605
14 | max-line-length = 119
15 | 
16 | [tool:pytest]
17 | doctest_optionflags=NUMBER NORMALIZE_WHITESPACE ELLIPSIS
18 | 
19 | 


--------------------------------------------------------------------------------
/setup.py:
--------------------------------------------------------------------------------
 1 | # Doc-builder package setup.
 2 | # The line above is checked by some of the utilities in this repo, do not change it.
 3 | 
 4 | from setuptools import find_packages, setup
 5 | 
 6 | install_requires = ["black", "GitPython", "tqdm", "pyyaml", "packaging", "nbformat", "huggingface_hub", "pillow"]
 7 | 
 8 | extras = {}
 9 | 
10 | extras["transformers"] = ["transformers[dev]"]
11 | extras["testing"] = ["pytest", "pytest-xdist", "torch", "transformers", "tokenizers", "timm", "google-api-python-client", "requests"]
12 | extras["quality"] = ["black~=22.0", "isort>=5.5.4", "flake8>=3.8.3"]
13 | 
14 | extras["all"] = extras["testing"] + extras["quality"]
15 | extras["dev"] = extras["all"]
16 | 
17 | # Should only be utilized by core-devs for release
18 | extras["release"] = ["twine"]
19 | 
20 | 
21 | setup(
22 |     name="hf-doc-builder",
23 |     version="0.6.0.dev0",
24 |     author="Hugging Face, Inc.",
25 |     license="Apache",
26 |     author_email="docs@huggingface.co",
27 |     description="Doc building utility",
28 |     long_description=open("README.md", "r", encoding="utf-8").read(),
29 |     long_description_content_type="text/markdown",
30 |     keywords="doc documentation doc-builder huggingface hugging face",
31 |     url="https://github.com/huggingface/doc-builder",
32 |     package_dir={"": "src"},
33 |     packages=find_packages("src"),
34 |     extras_require=extras,
35 |     install_requires=install_requires,
36 |     entry_points={"console_scripts": ["doc-builder=doc_builder.commands.doc_builder_cli:main"]},
37 | )
38 | 
39 | # Release checklist
40 | # 1. Checkout the release branch (for a patch the current release branch, for a new minor version, create one):
41 | #      git checkout -b vXX.xx-release
42 | #    The -b is only necessary for creation (so remove it when doing a patch)
43 | # 2. Change the version in __init__.py and setup.py to the proper value.
44 | # 3. Commit these changes with the message: "Release: v<VERSION>"
45 | # 4. Add a tag in git to mark the release:
46 | #      git tag v<VERSION> -m 'Adds tag v<VERSION> for pypi'
47 | #    Push the tag and release commit to git: git push --tags origin vXX.xx-release
48 | # 5. Run the following commands in the top-level directory:
49 | #      rm -rf dist
50 | #      rm -rf build
51 | #      python setup.py bdist_wheel
52 | #      python setup.py sdist
53 | # 6. Upload the package to the pypi test server first:
54 | #      twine upload dist/* -r testpypi
55 | # 7. Check that you can install it in a virtualenv by running:
56 | #      pip install hf-doc-builder
57 | #      pip uninstall hf-doc-builder
58 | #      pip install -i https://testpypi.python.org/pypi hf-doc-builder
59 | #      It's recommended to check that there are no issues building the docs, 
60 | #      so try running a command like `doc-builder`
61 | # 8. Upload the final version to actual pypi:
62 | #      twine upload dist/* -r pypi
63 | # 9. Add release notes to the tag in github once everything is looking hunky-dory.
64 | # 10. Go back to the main branch and update the version in __init__.py, setup.py to the new version ".dev" and push to
65 | #     main.


--------------------------------------------------------------------------------
/src/doc_builder/__init__.py:
--------------------------------------------------------------------------------
 1 | # coding=utf-8
 2 | # Copyright 2021 The HuggingFace Team. All rights reserved.
 3 | #
 4 | # Licensed under the Apache License, Version 2.0 (the "License");
 5 | # you may not use this file except in compliance with the License.
 6 | # You may obtain a copy of the License at
 7 | #
 8 | #     http://www.apache.org/licenses/LICENSE-2.0
 9 | #
10 | # Unless required by applicable law or agreed to in writing, software
11 | # distributed under the License is distributed on an "AS IS" BASIS,
12 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | # See the License for the specific language governing permissions and
14 | # limitations under the License.
15 | 
16 | # flake8: noqa
17 | # There's no way to ignore "F401 '...' imported but unused" warnings in this
18 | # module, but to preserve other warnings. So, don't check this module at all.
19 | 
20 | __version__ = "0.6.0.dev0"
21 | 
22 | from .autodoc import autodoc
23 | from .build_doc import build_doc
24 | from .convert_rst_to_mdx import convert_rst_docstring_to_mdx, convert_rst_to_mdx
25 | from .style_doc import style_doc_files
26 | from .utils import update_versions_file
27 | 


--------------------------------------------------------------------------------
/src/doc_builder/commands/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huggingface/doc-builder/0967fa8065bbe9b5b1c7599f8109014064e3b6e6/src/doc_builder/commands/__init__.py


--------------------------------------------------------------------------------
/src/doc_builder/commands/doc_builder_cli.py:
--------------------------------------------------------------------------------
 1 | # coding=utf-8
 2 | # Copyright 2021 The HuggingFace Team. All rights reserved.
 3 | #
 4 | # Licensed under the Apache License, Version 2.0 (the "License");
 5 | # you may not use this file except in compliance with the License.
 6 | # You may obtain a copy of the License at
 7 | #
 8 | #     http://www.apache.org/licenses/LICENSE-2.0
 9 | #
10 | # Unless required by applicable law or agreed to in writing, software
11 | # distributed under the License is distributed on an "AS IS" BASIS,
12 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | # See the License for the specific language governing permissions and
14 | # limitations under the License.
15 | 
16 | 
17 | from argparse import ArgumentParser
18 | 
19 | from doc_builder.commands.build import build_command_parser
20 | from doc_builder.commands.convert_doc_file import convert_command_parser
21 | from doc_builder.commands.notebook_to_mdx import notebook_to_mdx_command_parser
22 | from doc_builder.commands.preview import preview_command_parser
23 | from doc_builder.commands.push import push_command_parser
24 | from doc_builder.commands.style import style_command_parser
25 | 
26 | 
27 | def main():
28 |     parser = ArgumentParser("Doc Builder CLI tool", usage="doc-builder <command> [<args>]")
29 |     subparsers = parser.add_subparsers(help="doc-builder command helpers")
30 | 
31 |     # Register commands
32 |     convert_command_parser(subparsers=subparsers)
33 |     build_command_parser(subparsers=subparsers)
34 |     notebook_to_mdx_command_parser(subparsers=subparsers)
35 |     style_command_parser(subparsers=subparsers)
36 |     preview_command_parser(subparsers=subparsers)
37 |     push_command_parser(subparsers=subparsers)
38 | 
39 |     # Let's go
40 |     args = parser.parse_args()
41 | 
42 |     if not hasattr(args, "func"):
43 |         parser.print_help()
44 |         exit(1)
45 | 
46 |     # Run
47 |     args.func(args)
48 | 
49 | 
50 | if __name__ == "__main__":
51 |     main()
52 | 


--------------------------------------------------------------------------------
/src/doc_builder/commands/notebook_to_mdx.py:
--------------------------------------------------------------------------------
  1 | # coding=utf-8
  2 | # Copyright 2021 The HuggingFace Team. All rights reserved.
  3 | #
  4 | # Licensed under the Apache License, Version 2.0 (the "License");
  5 | # you may not use this file except in compliance with the License.
  6 | # You may obtain a copy of the License at
  7 | #
  8 | #     http://www.apache.org/licenses/LICENSE-2.0
  9 | #
 10 | # Unless required by applicable law or agreed to in writing, software
 11 | # distributed under the License is distributed on an "AS IS" BASIS,
 12 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 13 | # See the License for the specific language governing permissions and
 14 | # limitations under the License.
 15 | 
 16 | import argparse
 17 | import base64
 18 | import io
 19 | from pathlib import Path
 20 | 
 21 | import nbformat
 22 | from PIL import Image
 23 | from tqdm import tqdm
 24 | 
 25 | from ..style_doc import format_code_example
 26 | 
 27 | 
 28 | def png_to_jpeg(png_base64):
 29 |     png_bytes = base64.b64decode(png_base64)
 30 |     png_image = Image.open(io.BytesIO(png_bytes))
 31 |     png_image = png_image.convert("RGB")
 32 |     jpeg_bytes = io.BytesIO()
 33 |     png_image.save(jpeg_bytes, format="JPEG")
 34 |     jpeg_base64 = base64.b64encode(jpeg_bytes.getvalue()).decode("utf-8")
 35 |     return jpeg_base64
 36 | 
 37 | 
 38 | def notebook_to_mdx(notebook, max_len):
 39 |     content = []
 40 |     for cell in notebook["cells"]:
 41 |         if cell["cell_type"] == "code":
 42 |             code = cell["source"]
 43 |             outputs = [
 44 |                 o
 45 |                 for o in cell["outputs"]
 46 |                 if ("text" in o and o.get("name", None) == "stdout")
 47 |                 or "text/plain" in o
 48 |                 or ("data" in o and ("image/png" in o["data"] or "image/jpeg" in o["data"]))
 49 |             ]
 50 | 
 51 |             if len(outputs) > 0:
 52 |                 code_lines = code.split("\n")
 53 |                 # We can add >>> everywhere without worrying as format_code_example will replace them by ...
 54 |                 # when needed.
 55 |                 code_lines = [f">>> {l}" if not len(l) == 0 or l.isspace() else l for l in code_lines]
 56 |                 code = "\n".join(code_lines)
 57 |                 code = format_code_example(code, max_len=max_len)[0]
 58 |                 content.append(f"```python\n{code}\n```")
 59 | 
 60 |                 first_output = outputs[0]
 61 |                 if "text" in first_output:
 62 |                     output = first_output["text"]
 63 |                     output = f"<pre>\n{output.strip()}\n</pre>"
 64 |                 elif "text/plain" in first_output:
 65 |                     output = first_output["text/plain"]
 66 |                     output = f"<pre>\n{output.strip()}\n</pre>"
 67 |                 elif "data" in first_output and "image/png" in first_output["data"]:
 68 |                     jpeg_base64 = png_to_jpeg(first_output["data"]["image/png"])
 69 |                     output = f'<img src="data:image/jpeg;base64,{jpeg_base64}">\n'
 70 |                 elif "data" in first_output and "image/jpeg" in first_output["data"]:
 71 |                     output = f'<img src="data:image/jpeg;base64,{first_output["data"]["image/jpeg"]}">\n'
 72 | 
 73 |                 content.append(output)
 74 |             else:
 75 |                 code = format_code_example(code, max_len=max_len)[0]
 76 |                 content.append(f"```python\n{code}\n```")
 77 |         elif cell["cell_type"] == "markdown":
 78 |             content.append(cell["source"])
 79 |         else:
 80 |             content.append(f"```\n{cell['source']}\n```")
 81 | 
 82 |     mdx_content = "\n\n".join(content)
 83 |     return mdx_content
 84 | 
 85 | 
 86 | def notebook_to_mdx_command(args):
 87 |     src_path = Path(args.notebook_src).resolve()
 88 |     src_dir = src_path.parent if src_path.is_file() else src_path
 89 |     notebook_paths = [src_path] if src_path.is_file() else [*src_dir.glob("**/*.ipynb")]
 90 | 
 91 |     for notebook_path in tqdm(notebook_paths, desc="Converting .ipynb files to .md files"):
 92 |         notebook = nbformat.read(notebook_path, as_version=4)
 93 |         mdx_content = notebook_to_mdx(notebook, args.max_len)
 94 |         mdx_file_name = notebook_path.name[: -len(".ipynb")] + ".md"
 95 |         output_dir = notebook_path.parent if args.output_dir is None else Path(args.output_dir).resolve()
 96 |         dest_file_path = output_dir / mdx_file_name
 97 | 
 98 |         if src_path.is_dir() and args.open_notebook_prefix is not None:
 99 |             relative_path = notebook_path.relative_to(src_path)
100 |             colab_link = f"{args.open_notebook_prefix}/{str(relative_path)}"
101 |             colab_link_component = f'<DocNotebookDropdown classNames="absolute z-10 right-0 top-0" options={{[{{label: "Google Colab", value: "{colab_link}"}}]}} />'
102 |             mdx_content = f"{colab_link_component}\n\n" + mdx_content
103 | 
104 |         with open(dest_file_path, "w", encoding="utf-8") as f:
105 |             f.write(mdx_content)
106 | 
107 | 
108 | def notebook_to_mdx_command_parser(subparsers=None):
109 |     if subparsers is not None:
110 |         parser = subparsers.add_parser("notebook-to-mdx")
111 |     else:
112 |         parser = argparse.ArgumentParser("Doc Builder convert notebook to MD command")
113 | 
114 |     parser.add_argument("notebook_src", type=str, help="The notebook or directory containing notebook(s) to convert.")
115 |     parser.add_argument(
116 |         "--output_dir",
117 |         type=str,
118 |         help="Where the markdown files will be. Defaults to notebook source dir.",
119 |         default=None,
120 |     )
121 |     parser.add_argument(
122 |         "--max_len",
123 |         type=int,
124 |         default=119,
125 |         help="The number of maximum characters per line.",
126 |     )
127 |     parser.add_argument(
128 |         "--open_notebook_prefix",
129 |         type=str,
130 |         default=None,
131 |         help="Example: https://colab.research.google.com/github/{user}/{repo}/blob/{branch}",
132 |     )
133 | 
134 |     if subparsers is not None:
135 |         parser.set_defaults(func=notebook_to_mdx_command)
136 |     return parser
137 | 


--------------------------------------------------------------------------------
/src/doc_builder/commands/style.py:
--------------------------------------------------------------------------------
 1 | # coding=utf-8
 2 | # Copyright 2021 The HuggingFace Team. All rights reserved.
 3 | #
 4 | # Licensed under the Apache License, Version 2.0 (the "License");
 5 | # you may not use this file except in compliance with the License.
 6 | # You may obtain a copy of the License at
 7 | #
 8 | #     http://www.apache.org/licenses/LICENSE-2.0
 9 | #
10 | # Unless required by applicable law or agreed to in writing, software
11 | # distributed under the License is distributed on an "AS IS" BASIS,
12 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | # See the License for the specific language governing permissions and
14 | # limitations under the License.
15 | 
16 | 
17 | import argparse
18 | 
19 | from doc_builder import style_doc_files
20 | from doc_builder.utils import read_doc_config
21 | 
22 | 
23 | def style_command(args):
24 |     if args.path_to_docs is not None:
25 |         read_doc_config(args.path_to_docs)
26 |     changed = style_doc_files(*args.files, max_len=args.max_len, check_only=args.check_only)
27 |     if args.check_only and len(changed) > 0:
28 |         raise ValueError(f"{len(changed)} files should be restyled!")
29 |     elif len(changed) > 0:
30 |         print(f"Cleaned {len(changed)} files!")
31 | 
32 | 
33 | def style_command_parser(subparsers=None):
34 |     if subparsers is not None:
35 |         parser = subparsers.add_parser("style")
36 |     else:
37 |         parser = argparse.ArgumentParser("Doc Builder style command")
38 | 
39 |     parser.add_argument("files", nargs="+", help="The file(s) or folder(s) to restyle.")
40 |     parser.add_argument("--path_to_docs", type=str, help="The path to the doc source folder if using the config.")
41 |     parser.add_argument("--max_len", type=int, default=119, help="The maximum length of lines.")
42 |     parser.add_argument("--check_only", action="store_true", help="Whether to only check and not fix styling issues.")
43 | 
44 |     if subparsers is not None:
45 |         parser.set_defaults(func=style_command)
46 |     return parser
47 | 


--------------------------------------------------------------------------------
/src/doc_builder/external.py:
--------------------------------------------------------------------------------
  1 | # coding=utf-8
  2 | # Copyright 2022 The HuggingFace Team. All rights reserved.
  3 | #
  4 | # Licensed under the Apache License, Version 2.0 (the "License");
  5 | # you may not use this file except in compliance with the License.
  6 | # You may obtain a copy of the License at
  7 | #
  8 | #     http://www.apache.org/licenses/LICENSE-2.0
  9 | #
 10 | # Unless required by applicable law or agreed to in writing, software
 11 | # distributed under the License is distributed on an "AS IS" BASIS,
 12 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 13 | # See the License for the specific language governing permissions and
 14 | # limitations under the License.
 15 | 
 16 | import os
 17 | import re
 18 | import tempfile
 19 | import zlib
 20 | 
 21 | import git
 22 | import requests
 23 | 
 24 | 
 25 | HF_DOC_PREFIX = "https://huggingface.co/docs/"
 26 | EXTERNAL_DOC_OBJECTS_CACHE = {}
 27 | HUGGINFACE_LIBS = [
 28 |     "accelerate",
 29 |     "datasets",
 30 |     "evaluate",
 31 |     "huggingface_hub",
 32 |     "optimum",
 33 |     "tokenizers",
 34 |     "transformers",
 35 |     "trl",
 36 | ]
 37 | 
 38 | 
 39 | def post_process_objects_inv(object_data, doc_url):
 40 |     """
 41 |     Post-processes the data in sphinx-like format to get a dictionary object_name: link in doc.
 42 | 
 43 |     Args:
 44 |         object_data (`str`): The data in the `objects.inv` object (except the first 4 lines).
 45 |         doc_url (`str`): The documentation url of the package.
 46 |     """
 47 |     links = {}
 48 |     for line in object_data:
 49 |         if len(line) == 0:
 50 |             continue
 51 |         name, typ, _, link = line.split(" ")[:4]
 52 |         if typ in ["py:class", "py:function", "py:method"]:
 53 |             link = link.replace("$", name)
 54 |             links[name] = f"{doc_url}/{link}"
 55 |     return links
 56 | 
 57 | 
 58 | def get_stable_version(package_name, repo_owner="huggingface", repo_name=None):
 59 |     """
 60 |     Gets the version of the last release of a package.
 61 | 
 62 |     Args:
 63 |         package_name (`str`): The name of the package.
 64 |         repo_owner (`str`): The owner of the GitHub repo.
 65 |         repo_name (`str`, *optional*, defaults to `package_name`):
 66 |             The name of the GitHub repo. If not provided, will be the same as the package name.
 67 |     """
 68 |     repo_name = repo_name if repo_name is not None else package_name
 69 |     github_url = f"https://github.com/{repo_owner}/{repo_name}"
 70 |     try:
 71 |         # Get the version tags from the GitHub repo in decreasing order (that's what '-v:refname' means)
 72 |         result = git.cmd.Git().ls_remote(github_url, sort="-v:refname", tags=True)
 73 |     except git.GitCommandError:
 74 |         return "main"
 75 | 
 76 |     # One line per tag
 77 |     for line in result.split("\n"):
 78 |         # Lines returned are {sha}\trefs/tags/{tag}^{}, we grab the tag
 79 |         candidate = line.split("/")[-1].replace("^", "").replace("{}", "")
 80 |         # Some tags are not versions (looking at your VERSION and delete tags Datasets)
 81 |         if re.search(r"v?\d+\.\d+\.\d+", candidate):
 82 |             # Add the v is missing (looking at you Datasets :-p)
 83 |             return candidate if candidate.startswith("v") else f"v{candidate}"
 84 | 
 85 |     return "main"
 86 | 
 87 | 
 88 | def get_objects_map(package_name, version="main", language="en", repo_owner="huggingface", repo_name=None):
 89 |     """
 90 |     Downloads the `objects.inv` for a package and post-processes it to get a nice dictionary.
 91 | 
 92 |     Args:
 93 |         package_name (`str`): The name of the external package.
 94 |         version (`str`, *optional*, defaults to `"main"`): The version of the package for which documentation is built.
 95 |         language (`str`, *optional*, defaults to `"en"`): The language of the documentation being built.
 96 |         repo_owner (`str`, *optional*, defaults to `"huggingface"`): The owner of the GitHub repo.
 97 |         repo_name (`str`, *optional*, defaults to `package_name`):
 98 |             The name of the GitHub repo. If not provided, it will be the same as the package name.
 99 |     """
100 |     repo_name = repo_name if repo_name is not None else package_name
101 |     # We link to main in `package_name` from the main doc (or PR docs) but to the last stable release otherwise.
102 |     if version in ["main", "master"] or version.startswith("pr_"):
103 |         package_version = "main"
104 |     else:
105 |         package_version = get_stable_version(package_name, repo_owner, repo_name)
106 | 
107 |     doc_url = f"{HF_DOC_PREFIX}{package_name}/{package_version}/{language}"
108 |     url = f"{doc_url}/objects.inv"
109 |     try:
110 |         request = requests.get(url, stream=True)
111 |         request.raise_for_status()
112 |         with tempfile.TemporaryDirectory() as tmp_dir:
113 |             tmp_file = os.path.join(tmp_dir, "objects.inv")
114 |             with open(tmp_file, "ab") as writer:
115 |                 for chunk in request.iter_content(chunk_size=1024):
116 |                     if chunk:  # filter out keep-alive new chunks
117 |                         writer.write(chunk)
118 | 
119 |             with open(tmp_file, "rb") as reader:
120 |                 object_lines = reader.readlines()[4:]
121 |                 object_data = zlib.decompress(b"".join(object_lines)).decode().split("\n")
122 |             return post_process_objects_inv(object_data, doc_url)
123 |     except Exception:
124 |         return {}
125 | 
126 | 
127 | def get_external_object_link(object_name, page_info):
128 |     if object_name.startswith("~"):
129 |         object_name = object_name[1:]
130 |         link_name = object_name.split(".")[-1]
131 |     else:
132 |         link_name = object_name
133 | 
134 |     version = page_info.get("version", "main")
135 |     language = page_info.get("language", "en")
136 |     if language != "en":
137 |         # No resolving for other languages then English as we don't translate API doc pages/docstrings for now.
138 |         return f"`{link_name}`"
139 | 
140 |     package_name = object_name.split(".")[0]
141 |     if package_name not in HUGGINFACE_LIBS:
142 |         # No resolving for non-HF libs for now.
143 |         return f"`{link_name}`"
144 | 
145 |     if package_name not in EXTERNAL_DOC_OBJECTS_CACHE:
146 |         EXTERNAL_DOC_OBJECTS_CACHE[package_name] = get_objects_map(package_name, version=version, language=language)
147 |     object_url = EXTERNAL_DOC_OBJECTS_CACHE[package_name].get(object_name, None)
148 | 
149 |     if object_url is None:
150 |         # Object not found in the lib
151 |         return f"`{link_name}`"
152 |     else:
153 |         return f"[{link_name}]({object_url})"
154 | 


--------------------------------------------------------------------------------
/tests/data/convert_include_dummy.txt:
--------------------------------------------------------------------------------
 1 | <!-- START header_1 -->
 2 | # This is the first header
 3 | Other text 1
 4 | <!-- END header_1 -->
 5 | 
 6 | <!-- START header_2 -->
 7 | # This is the second header
 8 | Other text 2
 9 | <!-- END header_2 -->
10 | 
11 | <!-- START header_3 -->
12 | # This is the third header
13 | Other text 3
14 | <!-- END header_3 -->


--------------------------------------------------------------------------------
/tests/data/convert_literalinclude_dummy.txt:
--------------------------------------------------------------------------------
 1 | # START python_import_answer
 2 | import scipy as sp
 3 | # END python_import_answer
 4 | 
 5 | # START python_import
 6 | import numpy as np
 7 | import pandas as pd
 8 | # END python_import
 9 | 
10 | # START node_import
11 | import fs
12 | # END node_import"""


--------------------------------------------------------------------------------
/tests/test_build_doc.py:
--------------------------------------------------------------------------------
 1 | # coding=utf-8
 2 | # Copyright 2021 The HuggingFace Team. All rights reserved.
 3 | #
 4 | # Licensed under the Apache License, Version 2.0 (the "License");
 5 | # you may not use this file except in compliance with the License.
 6 | # You may obtain a copy of the License at
 7 | #
 8 | #     http://www.apache.org/licenses/LICENSE-2.0
 9 | #
10 | # Unless required by applicable law or agreed to in writing, software
11 | # distributed under the License is distributed on an "AS IS" BASIS,
12 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | # See the License for the specific language governing permissions and
14 | # limitations under the License.
15 | 
16 | import unittest
17 | 
18 | from doc_builder.build_doc import _re_autodoc, _re_list_item, resolve_open_in_colab
19 | 
20 | 
21 | class BuildDocTester(unittest.TestCase):
22 |     def test_re_autodoc(self):
23 |         self.assertEqual(
24 |             _re_autodoc.search("[[autodoc]] transformers.FlaxBertForQuestionAnswering").groups(),
25 |             ("transformers.FlaxBertForQuestionAnswering",),
26 |         )
27 | 
28 |     def test_re_list_item(self):
29 |         self.assertEqual(_re_list_item.search("   - forward").groups(), ("forward",))
30 | 
31 |     def test_resolve_open_in_colab(self):
32 |         expected = """
33 | <DocNotebookDropdown
34 |   classNames="absolute z-10 right-0 top-0"
35 |   options={[
36 |     {label: "Mixed", value: "https://colab.research.google.com/github/huggingface/notebooks/blob/main/transformers_doc/en/quicktour.ipynb"},
37 |     {label: "PyTorch", value: "https://colab.research.google.com/github/huggingface/notebooks/blob/main/transformers_doc/en/pytorch/quicktour.ipynb"},
38 |     {label: "TensorFlow", value: "https://colab.research.google.com/github/huggingface/notebooks/blob/main/transformers_doc/en/tensorflow/quicktour.ipynb"},
39 |     {label: "Mixed", value: "https://studiolab.sagemaker.aws/import/github/huggingface/notebooks/blob/main/transformers_doc/en/quicktour.ipynb"},
40 |     {label: "PyTorch", value: "https://studiolab.sagemaker.aws/import/github/huggingface/notebooks/blob/main/transformers_doc/en/pytorch/quicktour.ipynb"},
41 |     {label: "TensorFlow", value: "https://studiolab.sagemaker.aws/import/github/huggingface/notebooks/blob/main/transformers_doc/en/tensorflow/quicktour.ipynb"},
42 | ]} />
43 | """
44 |         self.assertEqual(
45 |             resolve_open_in_colab("\n[[open-in-colab]]\n", {"package_name": "transformers", "page": "quicktour.html"}),
46 |             expected,
47 |         )
48 | 


--------------------------------------------------------------------------------
/tests/test_convert_doc_file.py:
--------------------------------------------------------------------------------
 1 | # Licensed under the Apache License, Version 2.0 (the "License");
 2 | # you may not use this file except in compliance with the License.
 3 | # You may obtain a copy of the License at
 4 | #
 5 | #     http://www.apache.org/licenses/LICENSE-2.0
 6 | #
 7 | # Unless required by applicable law or agreed to in writing, software
 8 | # distributed under the License is distributed on an "AS IS" BASIS,
 9 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 | # See the License for the specific language governing permissions and
11 | # limitations under the License.
12 | 
13 | import unittest
14 | 
15 | from doc_builder.commands.convert_doc_file import shorten_internal_refs
16 | 
17 | 
18 | class ConvertDocFileTester(unittest.TestCase):
19 |     def test_shorten_internal_refs(self):
20 |         self.assertEqual(shorten_internal_refs("Checkout the [`~transformers.Trainer`]."), "Checkout the [`Trainer`].")
21 |         self.assertEqual(
22 |             shorten_internal_refs("Look at the [`~transformers.PreTrainedModel.generate`] method."),
23 |             "Look at the [`~PreTrainedModel.generate`] method.",
24 |         )
25 | 


--------------------------------------------------------------------------------
/tests/test_utils.py:
--------------------------------------------------------------------------------
 1 | # coding=utf-8
 2 | # Copyright 2021 The HuggingFace Team. All rights reserved.
 3 | #
 4 | # Licensed under the Apache License, Version 2.0 (the "License");
 5 | # you may not use this file except in compliance with the License.
 6 | # You may obtain a copy of the License at
 7 | #
 8 | #     http://www.apache.org/licenses/LICENSE-2.0
 9 | #
10 | # Unless required by applicable law or agreed to in writing, software
11 | # distributed under the License is distributed on an "AS IS" BASIS,
12 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | # See the License for the specific language governing permissions and
14 | # limitations under the License.
15 | 
16 | 
17 | import tempfile
18 | import unittest
19 | from pathlib import Path
20 | 
21 | import yaml
22 | from doc_builder.utils import sveltify_file_route, update_versions_file
23 | 
24 | 
25 | class UtilsTester(unittest.TestCase):
26 |     def test_update_versions_file(self):
27 |         repo_folder = Path(__file__).parent.parent
28 |         # test canonical
29 |         with tempfile.TemporaryDirectory() as tmp_dir:
30 |             with open(f"{tmp_dir}/_versions.yml", "w") as tmp_yml:
31 |                 versions = [{"version": "main"}, {"version": "v4.2.3"}, {"version": "v4.2.1"}]
32 |                 yaml.dump(versions, tmp_yml)
33 |             update_versions_file(tmp_dir, "v4.2.2", repo_folder)
34 |             with open(f"{tmp_dir}/_versions.yml", "r") as tmp_yml:
35 |                 yml_str = tmp_yml.read()
36 |                 expected_yml = "- version: main\n- version: v4.2.3\n- version: v4.2.2\n- version: v4.2.1\n"
37 |                 self.assertEqual(yml_str, expected_yml)
38 | 
39 |         # test yml with main version only
40 |         with tempfile.TemporaryDirectory() as tmp_dir:
41 |             with open(f"{tmp_dir}/_versions.yml", "w") as tmp_yml:
42 |                 versions = [{"version": "main"}]
43 |                 yaml.dump(versions, tmp_yml)
44 |             update_versions_file(tmp_dir, "v4.2.2", repo_folder)
45 |             with open(f"{tmp_dir}/_versions.yml", "r") as tmp_yml:
46 |                 yml_str = tmp_yml.read()
47 |                 expected_yml = "- version: main\n- version: v4.2.2\n"
48 |                 self.assertEqual(yml_str, expected_yml)
49 | 
50 |         # test yml without main version
51 |         with tempfile.TemporaryDirectory() as tmp_dir:
52 |             with open(f"{tmp_dir}/_versions.yml", "w") as tmp_yml:
53 |                 versions = [{"version": "v4.2.2"}]
54 |                 yaml.dump(versions, tmp_yml)
55 | 
56 |             self.assertRaises(ValueError, update_versions_file, tmp_dir, "v4.2.2", repo_folder)
57 | 
58 |         # test inserting duplicate version into yml
59 |         with tempfile.TemporaryDirectory() as tmp_dir:
60 |             with open(f"{tmp_dir}/_versions.yml", "w") as tmp_yml:
61 |                 versions = [{"version": "main"}]
62 |                 yaml.dump(versions, tmp_yml)
63 |             update_versions_file(tmp_dir, "v4.2.2", repo_folder)
64 |             update_versions_file(tmp_dir, "v4.2.2", repo_folder)  # inserting duplicate version
65 |             with open(f"{tmp_dir}/_versions.yml", "r") as tmp_yml:
66 |                 yml_str = tmp_yml.read()
67 |                 expected_yml = "- version: main\n- version: v4.2.2\n"
68 |                 self.assertEqual(yml_str, expected_yml)
69 | 
70 |     def test_sveltify_file_route(self):
71 |         mdx_file_path = "guide.mdx"
72 |         svelte_file_path = sveltify_file_route(mdx_file_path)
73 |         expected_path = "guide/+page.svelte"
74 |         self.assertEqual(svelte_file_path, expected_path)
75 | 
76 |         mdx_file_path = "xyz/abc/guide.mdx"
77 |         svelte_file_path = sveltify_file_route(mdx_file_path)
78 |         expected_path = "xyz/abc/guide/+page.svelte"
79 |         self.assertEqual(svelte_file_path, expected_path)
80 | 
81 |         mdx_file_path = "/xyz/abc/guide.mdx"
82 |         svelte_file_path = sveltify_file_route(mdx_file_path)
83 |         expected_path = "/xyz/abc/guide/+page.svelte"
84 |         self.assertEqual(svelte_file_path, expected_path)
85 | 


--------------------------------------------------------------------------------