mirror of
https://github.com/He4eT/oddsquat.git
synced 2026-05-04 20:37:22 +00:00
release: 2026-04-03-051115
This commit is contained in:
parent
e1a78fb2f1
commit
1f7f2efb79
75 changed files with 6408 additions and 0 deletions
25
docs/posts/2020/index.html
Normal file
25
docs/posts/2020/index.html
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta
|
||||
name="description"
|
||||
content="Redirect to '/posts/#2020'.">
|
||||
<meta
|
||||
http-equiv="Refresh"
|
||||
content="0; URL=/posts/#2020">
|
||||
<title>
|
||||
Redirect | oddsquat
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
Redirect to
|
||||
<a
|
||||
style="color: inherit;"
|
||||
href="/posts/#2020">
|
||||
/posts/#2020
|
||||
</a>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
123
docs/posts/2020/initial_post/index.html
Normal file
123
docs/posts/2020/initial_post/index.html
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="/favicon.ico" sizes="32x32">
|
||||
<link rel="icon" href="/icon.svg" type="image/svg+xml">
|
||||
|
||||
|
||||
<title>
|
||||
initial post | oddsquat
|
||||
</title>
|
||||
<meta name="description" content="Первый пост в этом фэнзине, рассказывающий о его внутреннем устойстве.">
|
||||
|
||||
<link rel="preload" href="/fonts/open_sans_condensed-32.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/fonts/open_sans_condensed-27.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/fonts/open_sans-25.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/fonts/open_sans-24.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/fonts/open_sans-17.woff2" as="font" type="font/woff2" crossorigin>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/css/fonts.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/typography.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/main.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="stripesContainer">
|
||||
<div class="stripes">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/">oddsquat</a></li>
|
||||
|
||||
|
||||
<li><a href="/posts/">
|
||||
posts</a></li>
|
||||
|
||||
|
||||
<li><a href="/posts/#2020">
|
||||
2020</a></li>
|
||||
|
||||
|
||||
<li>initial post</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<article>
|
||||
<h1 id="initial-post">Initial Post</h1>
|
||||
<p><strong>Oddsquat</strong> — мой маленький личный фэнзин про эксперименты, код и прочий киберпанк. Обычно такие сайты называются блогами, но в слове «фэнзин» есть приятный отголосок панк-культуры и её неотъемлемой DIY-составляющей.</p>
|
||||
<p>Основные причины, побудившие меня на создание своего уютного куска интернета:</p>
|
||||
<ul>
|
||||
<li>Хочется писать буквы, а возвращаться в ЖЖ не хочется.</li>
|
||||
<li>Фронтендер без портфолио — подозрительный фронтендер.</li>
|
||||
<li>Современный веб — памятник оверинженирингу. Лендинг с двумя абзацами текста, тремя картинками и мегабайтным бандлом из модных библиотек — одновременно безумие и норма в текущих реалиях. Мне больно на это смотреть, поэтому пришлось строить себе персональный оазис.</li>
|
||||
</ul>
|
||||
<p>В первом посте хочется рассказать, какие инструменты были использованы для создания этого сайта, какие решения были приняты и почему.</p>
|
||||
<h2 id="-">Название</h2>
|
||||
<p>Я вырос в девяностые, поэтому квикимобиль, бэтпещера и пузиблинчики для меня не пустой звук, а образец системы нейминга. Вот, например, у меня есть <a href="https://github.com/He4eT/oddkb" target="_blank">oddkb</a>.</p>
|
||||
<p>Свою квартиру с момента заселения я называю oddsquat (даже локация в Foursquare была), так пусть теперь и мой форпост в сети называется так же.</p>
|
||||
<p>Назвал сайт в честь SSID домашнего Wi-Fi, потому что не смог придумать более достойного названия :)</p>
|
||||
<h2 id="-">Платформа</h2>
|
||||
<p>Для статического сайта не нужен серверный код, поэтому WordPress и прочие CMS в качестве платформы я даже не рассматривал.</p>
|
||||
<p>Про генераторы статических сайтов раньше слышал, но подробно не изучал. Их оказалось так много (тут есть <a href="https://jamstack.org/generators/">длинный список</a>), что даже страшно.</p>
|
||||
<p>Посмотрев на самые популярные решения, я понял, что как-то неправильно понимаю значение термина «генератор статических сайтов», потому что все хором предлагают мне сгенерировать Progressive Web Application из React-компонентов с импортом данных из GraphQL-сервера вместо россыпи HTML-документов.</p>
|
||||
<p>Уверен, что уютный бложик — это точно не Web Application, а от Progressive в данном случае всем будет только хуже: искусственные трудности с роутингом, серверным рендерингом и сохранением позиции скрола успешно решены, когда каждая страница — это отдельный документ. Браузеры восхитительно умеют работать с HTML-документами!</p>
|
||||
<p>После непродолжительных поисков был найден <a href="https://doug2k1.github.io/nanogen/">Nanogen</a>, который делает именно то, что нужно, и не похож на космический корабль:</p>
|
||||
<ul>
|
||||
<li>Умеет Markdown и HTML (ejs);</li>
|
||||
<li>Имеет очень гибкую систему шаблонов;</li>
|
||||
<li>Не выходит за рамки стека Node.js.</li>
|
||||
</ul>
|
||||
<p>Да, в репозитории проекта давно не было коммитов, но хочется думать, что это по причине надёжности и закончености :)</p>
|
||||
<h2 id="-">Типографика</h2>
|
||||
<p>Я люблю текст и не умею в дизайн. Oddsquat — проект про буквы, значит, буквы должны быть красивыми и удобными.</p>
|
||||
<p>К теме типографики в вебе я подходил несколько раз, но безуспешно. Не получается структурировать и сохранить в голове все эти сакральные знания про кернинг и засечки, потому что не вижу никакой связи между теорией и практикой.</p>
|
||||
<p>Очередное погружение системных знаний опять не принесло, зато принесло удобный инструмент: <a href="https://github.com/KyleAMathews/typography.js">Typography.js</a>.</p>
|
||||
<p>Этот тулкит позволяет, покрутив ручки <a href="http://kyleamathews.github.io/typography.js/">интерактивного демо</a>, получить новое, но при этом гармоничное сочетание абзацев, заголовков и отступов между ними.
|
||||
Идеальный инструмент для тех, кто хочет поиграть со шрифтами, но не до конца понимает, как.</p>
|
||||
<p>Авторы настолько заботливые, что даже подключают <code>normalize.css</code> при генерации своих стилей, снимая с вас ещё одну головную боль. Благодаря им весь мой дополнительный css для стилизации сайта уложился в сто строк кода и хорошо работает в любых браузерах и на любых экранах.</p>
|
||||
<p>Со шрифтами всё просто:</p>
|
||||
<ul>
|
||||
<li><strong>Open Sans</strong> для текста и <strong>Open Sans Condensed</strong> для заголовков, потому что мне нравится слово «Open»;</li>
|
||||
<li><strong>Fira Code</strong> для кода, потому что лигатуры (<code>--></code>, <code>!==</code>) — это красиво.</li>
|
||||
</ul>
|
||||
<h2 id="-">Аналитика</h2>
|
||||
<p>Я долго думал, можно ли собирать аналитику просмотров, или нужно играть в идеальный веб до конца и полностью отказаться от слежки за пользователями. С одной стороны высокая идея, с другой — любопытство.</p>
|
||||
<p>После непродолжительного исследования пришёл к выводу, что Метрика и Аналитика от поисковых гигантов мне точно не подходят, а вот автор <a href="https://goatcounter.com/">GoatCounter</a> полностью понимает мою боль.</p>
|
||||
<p><a href="https://www.goatcounter.com/why/">Why I made GoatCounter</a> — отличный пост, где создатель сервиса ответил на все вопросы, которые у меня к нему возникли. Вот, например, замечательный абзац про причины бесплатности начального тарифа:</p>
|
||||
<blockquote>
|
||||
<p>I think it’s important to make the barrier of entry for software like this low as feasible to make actual meaningful inroads to “de-Google-fi” the internet a bit, and make pervasive tracking less common. Making it freely available (for personal use) is part of that.</p>
|
||||
</blockquote>
|
||||
<h2 id="-">Содержание</h2>
|
||||
<p>Самое главное. С формой и техническими вопросами всё ясно, но что же я буду складывать внутрь? Пока план такой:</p>
|
||||
<ul>
|
||||
<li>Я довольно часто изучаю штуки из разных областей и хочу описывать эти опыты. Вот, например, описал создание легковесного сайта.</li>
|
||||
<li>Мне нравится настраивать инструменты и рассказывать об этом.</li>
|
||||
<li>Есть несколько почтовых рассылок, которые я очень хочу начать переводить, чтобы начать читать.</li>
|
||||
</ul>
|
||||
<p>Признаюсь, что был очарован сайтом от ребят из команды <a href="https://100r.co/site/home.html">Hundred Rabbits</a> и захотел такое же, только своё.</p>
|
||||
<p>Stay tuned!</p>
|
||||
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
2020-11-08
|
||||
</footer>
|
||||
|
||||
<script async
|
||||
data-goatcounter="https://he4et.goatcounter.com/count"
|
||||
src="https://gc.zgo.at/count.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
109
docs/posts/2020/typographic_linter/index.html
Normal file
109
docs/posts/2020/typographic_linter/index.html
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="/favicon.ico" sizes="32x32">
|
||||
<link rel="icon" href="/icon.svg" type="image/svg+xml">
|
||||
|
||||
|
||||
<title>
|
||||
typographic linter | oddsquat
|
||||
</title>
|
||||
<meta name="description" content="Prettier для текста. Автоматизация рутинной типографики.">
|
||||
|
||||
<link rel="preload" href="/fonts/open_sans_condensed-32.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/fonts/open_sans_condensed-27.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/fonts/open_sans-25.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/fonts/open_sans-24.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/fonts/open_sans-17.woff2" as="font" type="font/woff2" crossorigin>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/css/fonts.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/typography.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/main.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="stripesContainer">
|
||||
<div class="stripes">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/">oddsquat</a></li>
|
||||
|
||||
|
||||
<li><a href="/posts/">
|
||||
posts</a></li>
|
||||
|
||||
|
||||
<li><a href="/posts/#2020">
|
||||
2020</a></li>
|
||||
|
||||
|
||||
<li>typographic linter</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<article>
|
||||
<h1 id="-code-style">Типографика как code style</h1>
|
||||
<h2 id="-">Основы</h2>
|
||||
<p>Для того, чтобы тексты было удобно читать и неудобно писать, человечество придумало разные правила. С орфографией и пунктуацией всё понятно, но про типографические правила говорят редко.</p>
|
||||
<p>Типографика — набор правил вёрстки текста, призванных повысить эстетику и читаемость. Именно в таком порядке, потому что люди сначала замечают текст и только потом начинают читать.</p>
|
||||
<p>Про шрифты, отступы и прочие кернинги в этот раз говорить не будем, потому что мне понравилось крутить ползунки в <a href="https://github.com/KyleAMathews/typography.js">Typography.js</a> и не переживать об эстетике.</p>
|
||||
<p>Разговор пойдёт про висячие предлоги и прочие тире с кавычками.</p>
|
||||
<h2 id="-">Проблематика</h2>
|
||||
<p>Сайты в интернете делятся на два типа: те, кто запаривается за подготовку текстов, и те, кто забивает. <a href="https://meduza.io/">Meduza.io</a> расставляет неразрывные пробелы в текстах новостей, а <a href="https://www.rbc.ru/">rbc.ru</a> — нет. Это не единственное отличие этих новостных порталов, но очень знаковое, как мне кажется.</p>
|
||||
<h3 id="-">Нужно забить!</h3>
|
||||
<p>Я прекрасно понимаю тех, кто не запаривается. Часть не знает, часть забивает (<a href="https://vas3k.ru/">Вастрик</a>, например), а у остальных user-generated content, который довольно рискованно автоматически форматировать. Аргументы для каждой группы:</p>
|
||||
<ul>
|
||||
<li>И так всё понятно.</li>
|
||||
<li>Условный Markdown со спецсимволами теряет половину обаяния.</li>
|
||||
<li>Правильные автоматические кавычки-ёлочки не сделают из комментария в Facebook литературный памятник, зато случайный японский эмотикон может разрушить цивилизацию: <br>
|
||||
<code>Прости ^_^" Забыл купить "Доширак"</code> превращается в <br>
|
||||
<code>Прости ^_^« Мы испортили »Твой текст«</code>.</li>
|
||||
<li>У студентов должен быть отдельный курс по расшифровке смайликов и компилированию C++ из чатов. Бонусный аргумент.</li>
|
||||
</ul>
|
||||
<h3 id="-">Нужно запариться!</h3>
|
||||
<p>Википедия утверждает, что <a href="https://ru.wikipedia.org/wiki/%D0%A2%D0%B8%D0%BF%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA%D0%B0">типографика</a> — это «свод строгих правил», но список не показывает и ссылок не даёт. Стандартом де-факто в рунете являются правила из <a href="https://www.artlebedev.ru/kovodstvo/sections/62/">§ 62 «Ководства»</a>. С ними или соглашаются, или <a href="https://medium.com/@kapanaga/62-6c664105dd30">громко спорят с некоторыми</a>.</p>
|
||||
<p>Пусть мне и не нравится полное отсутствие у Лебедева обоснований или ссылок на источники, но самому погружаться в историю вопроса и читать какой-нибудь авторитетный <a href="https://www.artlebedev.ru/izdal/spravochnik-izdatelya-i-avtora-2017/">«Справочник издателя и автора»</a> страшно: в нём 1010 страниц.</p>
|
||||
<p>Авторы, которые хотят радовать читателей с помощью тире, обычно не пишут в блокноте (мне так кажется) или носят свои тексты из блокнота в <a href="https://www.artlebedev.ru/typograf/">Типограф</a> от Артемия Лебедева, а потом назад. Про первых я ничего не знаю, а ко вторым сам отношусь, когда нужно причесать один или два текста.</p>
|
||||
<p>У Типографа и аналогичных веб-сервисов есть фундаментальные проблемы:</p>
|
||||
<ul>
|
||||
<li>Копировать текст из редактора в браузер, а потом назад — неудобно.</li>
|
||||
<li>Сервис может быть офлайн в неподходящий момент, я тоже.</li>
|
||||
<li>Сервис может читать мои тексты до публикации.</li>
|
||||
<li>Некоторые тексты никому нельзя показывать (по разным причинам).</li>
|
||||
</ul>
|
||||
<p>Признаюсь, что раньше я ни разу не думал об использовании типографа вне браузера, но как только образовалась перспектива заниматься этим на постоянной основе, стало понятно, что копировать текст из редактора в браузер и назад — не самое оптимальное решение и нужно что-то с этим делать.</p>
|
||||
<h2 id="-">Решение</h2>
|
||||
<p>Очевидный вариант — научить текстовый редактор автоматически расставлять неразрывные пробелы, исправлять мелкие опечатки, приводить кавычки к правильному виду, заменять дефисы на тире в нужных местах и многое другое. <br>
|
||||
Вот <a href="https://marketplace.visualstudio.com/items?itemName=rusnasonov.vscode-typograf">плагин для VS Code</a>.</p>
|
||||
<p>Мне больше нравится другой подход. Мы уже давно используем линтеры для языков программирования, давайте использовать их и для контента.</p>
|
||||
<p>Конечно, я не первый, кто так подумал. Плагин выше построен на основе замечательной библиотеки <a href="https://github.com/typograf/typograf">typograf</a> и прямо в README.md файле этого проекта можно найти ссылки на плагины для Babel, Gulp и Grunt.</p>
|
||||
<p>Библиотека очень гибко настраивается, содержит <a href="https://github.com/typograf/typograf/blob/dev/docs/RULES.ru.md">сотню готовых правил</a> и позволяет легко добавлять кастомные.</p>
|
||||
<p>В комплекте есть cli-утилита, которая умеет читать файлы, форматировать их и выводить результат в терминал, но почему-то не умеет файл перезаписывать. Поэтому для своих целей я написал небольшой скрипт, который, получив локаль и имя файла, изменяет его содержимое. С правилами тоже пришлось немного поиграть, потому что дефолтные принимают списки за диалоги и ломают markdown-разметку.</p>
|
||||
<p>Теперь для расстановки всех хитрых значков не нужно ходить в браузер, достаточно просто запустить скрипт, посмотреть с помощью <code>git diff</code> на результат и закоммитить нужные изменения.</p>
|
||||
<p>Красивые тексты лучше некрасивых.</p>
|
||||
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
2020-11-18
|
||||
</footer>
|
||||
|
||||
<script async
|
||||
data-goatcounter="https://he4et.goatcounter.com/count"
|
||||
src="https://gc.zgo.at/count.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
25
docs/posts/2024/index.html
Normal file
25
docs/posts/2024/index.html
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta
|
||||
name="description"
|
||||
content="Redirect to '/posts/#2024'.">
|
||||
<meta
|
||||
http-equiv="Refresh"
|
||||
content="0; URL=/posts/#2024">
|
||||
<title>
|
||||
Redirect | oddsquat
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
Redirect to
|
||||
<a
|
||||
style="color: inherit;"
|
||||
href="/posts/#2024">
|
||||
/posts/#2024
|
||||
</a>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
317
docs/posts/2024/selfhosted_llm/index.html
Normal file
317
docs/posts/2024/selfhosted_llm/index.html
Normal file
|
|
@ -0,0 +1,317 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="/favicon.ico" sizes="32x32">
|
||||
<link rel="icon" href="/icon.svg" type="image/svg+xml">
|
||||
|
||||
|
||||
<title>
|
||||
selfhosted LLM | oddsquat
|
||||
</title>
|
||||
<meta name="description" content="Персональные LLM в docker-контейнере на твоём компьютере.">
|
||||
|
||||
<link rel="preload" href="/fonts/open_sans_condensed-32.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/fonts/open_sans_condensed-27.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/fonts/open_sans-25.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/fonts/open_sans-24.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/fonts/open_sans-17.woff2" as="font" type="font/woff2" crossorigin>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/css/fonts.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/typography.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/main.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="stripesContainer">
|
||||
<div class="stripes">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/">oddsquat</a></li>
|
||||
|
||||
|
||||
<li><a href="/posts/">
|
||||
posts</a></li>
|
||||
|
||||
|
||||
<li><a href="/posts/#2024">
|
||||
2024</a></li>
|
||||
|
||||
|
||||
<li>selfhosted LLM</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<article>
|
||||
<h1 id="your-own-private-large-language-models">Your Own Private Large Language Models</h1>
|
||||
<p>С одной стороны, я сомневаюсь, что Большие Языковые Модели (LLM) смогут однажды эволюционировать в AGI. С другой — я по-настоящему впечатлён тем, что щепотка статистики справляется с написанием текстов лучше меня.</p>
|
||||
<p>В любом случае, джинна обратно в бутылку уже не вернуть, и все те письма в различные организации, которые я не хочу писать сам, будут теперь написаны месивом из байтиков.</p>
|
||||
<p>Действительно пугает меня в этой ситуации только то, что флагманом новой эры почему-то стала компания OpenAI, которая, вопреки названию, совершенно не Open.
|
||||
Множество компаний и людей вписали их продукты в свою рутину и не страшатся такой неподконтрольной зависимости.</p>
|
||||
<p>Я так не могу. К счастью, я не один такой, и на данный момент уже есть множество альтернативных моделей от разных вендоров. Они отличаются друг от друга качеством, размером, возможностями и лицензиями, так что при желании можно надолго занять себя знакомством с обширным ассортиментом. Например, на портале <a href="https://huggingface.co/">HuggingFace</a>, который можно описать как «GitHub для LLM и всего, что вокруг».</p>
|
||||
<p>Должен признаться, что очень слабо разбираюсь в параметрах и характеристиках языковых моделей, но оказалось, что для того, чтобы начать, эти знания не так уж и необходимы.</p>
|
||||
<p>Ниже инструкция, как запустить LLM на своём железе, как упаковать всё это в docker-контейнер, чтобы не размазать случайно по всей файловой системе, как получить совместимый с OpenAI API и как потом этим пользоваться.</p>
|
||||
<hr>
|
||||
<ul>
|
||||
<li><a href="#setup">Установка и настройка</a><ul>
|
||||
<li><a href="#setup-ollama">Установка Ollama</a></li>
|
||||
<li><a href="#setup-model">Загрузка модели и диалог с ней</a></li>
|
||||
<li><a href="#custom-model">Кастомные модели и их тонкая настройка</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#usage">Использование</a><ul>
|
||||
<li><a href="#fake-open-ai">Мимикрия под API от OpenAI</a></li>
|
||||
<li><a href="#ollama-nvim">Интеграция с NeoVim</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#update-delete">Обновление и удаление</a></li>
|
||||
<li><a href="#performance">Производительность</a></li>
|
||||
<li><a href="#why">Зачем всё это нужно?</a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h2 id='setup'>
|
||||
Установка и настройка
|
||||
</h2>
|
||||
|
||||
<p>Существует несколько продуктов, которые стараются избавить пользователя от головной боли и возни с инфраструктурой. Мне понятнее всего оказался проект <a href="https://ollama.ai/">Ollama</a>, с ним мы и будем экспериментировать.</p>
|
||||
<p>Кроме бинарников для Linux и MacOS, они <a href="https://ollama.ai/blog/ollama-is-now-available-as-an-official-docker-image">предоставляют</a> официальный <a href="https://hub.docker.com/r/ollama/ollama">docker-образ</a>, работу с которым я и опишу.</p>
|
||||
<p>Использование docker-контейнеров, к сожалению, слегка усложняет взаимодействие с Ollama, так что большая часть текста и кода в этом посте посвящены решению проблем, которые, по сути, я придумал себе сам.</p>
|
||||
<h3 id='setup-ollama'>
|
||||
Установка Ollama
|
||||
</h3>
|
||||
|
||||
<p>Для создания и первого запуска контейнера нужно выполнить команду:</p>
|
||||
<pre><code>docker run -d -v ollama:/root/.ollama -p 11434:11434 --name ollama ollama/ollama</code></pre><p>Счастливые владельцы видеокарт от Nvidia могут установить <a href="https://docs.nvidia.com/datacenter/cloud-native/container-toolkit/latest/install-guide.html#installation">Nvidia container toolkit</a> и активировать поддержку GPU с помощью флага <code>--gpus=all</code>.</p>
|
||||
<p>После создания запускать и останавливать контейнер <code>ollama</code> можно так:</p>
|
||||
<pre><code>docker start ollama
|
||||
docker stop ollama</code></pre><p>Контейнер предоставляет доступ к <a href="https://github.com/jmorganca/ollama/blob/main/docs/api.md">Ollama API</a> на 11434 порту, а также позволяет устанавливать и общаться с установленными LLM через терминал.</p>
|
||||
<h3 id='setup-model'>
|
||||
Загрузка модели и диалог с ней
|
||||
</h3>
|
||||
|
||||
<p>Ollama позволяет запускать любые GGUF, PyTorch или Safetensors модели (что бы это ни значило), но самый простой путь — загрузка моделей из специальной <a href="https://ollama.ai/library">библиотеки</a>.</p>
|
||||
<p>Для того, чтобы скачать модель и начать с ней диалог, нужно выполнить команду:</p>
|
||||
<pre><code>docker exec -it ollama ollama run mistral</code></pre><p>Вместо <code>mistral</code> от одноимённой комании можно выбрать любую другую модель из библиотеки, например, легкую <code>phi</code> от Microsoft Research.</p>
|
||||
<p>Кроме <code>run</code> доступны также <code>list</code>, <code>pull</code> и <code>rm</code> для просмотра списка, скачивания и удаления моделей соответственно.</p>
|
||||
<p>Чтобы не писать такие длинные заклинания каждый раз, я добавил в <code>.zshrc</code> пару алиасов:</p>
|
||||
<pre><code>alias summonable='docker exec -it ollama ollama list'
|
||||
alias summon='clear && docker exec -it ollama ollama run'</code></pre><p>Теперь можно смотреть на список установленных моделей и запускать диалог с выбранной:</p>
|
||||
<pre><code>summonable
|
||||
summon phi</code></pre><h3 id='custom-model'>
|
||||
Кастомные модели и их тонкая настройка
|
||||
</h3>
|
||||
|
||||
<p>Ollama позволяет на основе существующих создавать производные модели с заранее определёнными инструкциями или параметрами. Для этого нужно создать специальный файл, в котором указана родительская модель и определены желаемые значения параметров. Подробнее о формате этих файлов можно прочесть в документации: <a href="https://github.com/jmorganca/ollama/blob/main/docs/modelfile.md">Modelfile</a>.</p>
|
||||
<blockquote>
|
||||
<p>В какой-то момент Ollama Web UI превратился в Open WebUI, а OllamaHub прекратил существовать. Все ссылки в следующем абзаце больше не представляют какой-либо ценности.</p>
|
||||
</blockquote>
|
||||
<p>Чтобы посмотреть, как должен выглядеть Modelfile, можно посетить <a href="https://ollamahub.com/">OllamaHub</a> от разработчиков стороннего <a href="https://github.com/ollama-webui/ollama-webui/">Ollama Web UI</a>. На сайте есть <a href="https://ollamahub.com/m/smoothbrainape/hu-tao:latest">примеры очень тонкой настройки множества параметров</a> модели для соответствия образу конкретного персонажа, но в качестве образца я буду использовать небольшой <a href="https://ollamahub.com/m/kamjin/english-teacher:latest">English Teacher Modelfile</a>:</p>
|
||||
<h4 id="englishteacher-modelfile">EnglishTeacher.Modelfile</h4>
|
||||
<pre><code>FROM llama2
|
||||
SYSTEM """
|
||||
I want you to act as a English teacher.
|
||||
Your main responsibility will be to instruct me in all aspects of English, including grammar, vocabulary, reading, writing and speaking.
|
||||
You should always take the initiative to correct my mistakes in grammar and vocabulary, and you can give me two or three examples at any appropriate time to help me understand better.
|
||||
"""</code></pre><p>Вообще, для загрузки кастомной модели достаточно выполнить команду <code>create</code>, но в случае использования Ollama внутри docker-контейнера возникает необходимость каким-то образом файл с моделью в этот контейнер передать.</p>
|
||||
<p>Для решения этой проблемы я набросал небольшой bash-скрипт:</p>
|
||||
<h4 id="applymodelfile-bash">applyModelfile.bash</h4>
|
||||
<pre><code class="language-bash">#!/bin/bash
|
||||
|
||||
containerId=$(docker ps | grep ollama/ollama | cut -d' ' -f1)
|
||||
|
||||
echo "Container ID:"
|
||||
echo $containerId
|
||||
echo ""
|
||||
|
||||
if [ -z "$containerId" ]; then
|
||||
echo "Container does not exist."
|
||||
exit 1
|
||||
fi
|
||||
|
||||
modelName=$1
|
||||
echo "Model name:"
|
||||
echo $modelName
|
||||
echo
|
||||
|
||||
sourcePath="./models/${modelName}.Modefile"
|
||||
targetPath="/home/${modelName}.Modefile"
|
||||
|
||||
if ! test -f $sourcePath; then
|
||||
echo "File does not exist."
|
||||
echo $sourcePath
|
||||
exit 1
|
||||
fi
|
||||
|
||||
docker cp $sourcePath "${containerId}:${targetPath}"
|
||||
clear
|
||||
docker exec -it ollama ollama create $modelName -f $targetPath</code></pre>
|
||||
<p>Этот скрипт нужно поместить по соседству с директорией <code>models</code> и сделать исполняемым с помощью <code>chmod +x applyModelfile.bash</code>.
|
||||
Должна получиться примерно такая структура:</p>
|
||||
<pre><code>├── models
|
||||
│ └── EnglishTeacher.Modefile
|
||||
└── applyModelfile.bash</code></pre><p>После этого модель можно загрузить в контейнер и начать с ней диалог:</p>
|
||||
<pre><code>./applyModelfile.bash EnglishTeacher
|
||||
summon EnglishTeacher</code></pre><h2 id='usage'>
|
||||
Использование
|
||||
</h2>
|
||||
|
||||
<p>Разговоры с галлюцинирующим искусственным интеллектом в терминале — это, конечно, волшебно, но потенциал больших языковых моделeй по-настоящему раскрывается, когда они начинают портить данные в соседних приложениях!</p>
|
||||
<p>В <a href="https://github.com/jmorganca/ollama#community-integrations">GitHub-репозитории Ollama</a> можно найти ссылки на множество веб-интерфейсов, библиотек и плагинов для текстовых редакторов и прочих Obsidian'ов.</p>
|
||||
<p>Не ручаюсь за весь список, но расскажу про то, с чем экспериментировал сам.</p>
|
||||
<h3 id='fake-open-ai'>
|
||||
Мимикрия под API от OpenAI
|
||||
</h3>
|
||||
|
||||
<blockquote>
|
||||
<p>В какой-то момент <a href="https://ollama.com/blog/openai-compatibility">в Ollama появилась поддержка совместимости с форматом API от OpenAI</a> и этот раздел потерял актуальность.</p>
|
||||
</blockquote>
|
||||
<p>API Ollama используется в меньшем числе продуктов, чем API от OpenAI. К счастью, это не проблема: с помощью прокси-прослойки под названием <a href="https://github.com/BerriAI/litellm">LiteLLM</a> можно сделать их совместимыми. Инструкция по установке и использованию в общем случае есть в репозитории и довольно тривиальна, но мне опять потребовалось немного кода, чтобы заставить их работать вместе на моих условиях.</p>
|
||||
<p>Я хотел, чтобы LiteLLM-прокси и Ollama работали на разных компьтерах, и не хотел ставить pip-пакеты в систему. В результате родилось решение из docker-файла с хаками и скрипта, который в нём запускается. Я не специалист в написании docker-файлов, так что уверен в неоптимальности финального решения. Точно можно и нужно обойтись без <code>run --net=host</code> и отдельного скрипта, например.</p>
|
||||
<p>Несмотря на костыльность связки, она справляется со своей задачей:</p>
|
||||
<h4 id="dockerfile">Dockerfile</h4>
|
||||
<pre><code class="language-Dockerfile">FROM python:3.10
|
||||
|
||||
COPY startProxy.sh /usr/src/app/startProxy.sh
|
||||
RUN chmod +x /usr/src/app/startProxy.sh
|
||||
|
||||
WORKDIR /usr/src/app
|
||||
|
||||
# Prevent ollama run attempt
|
||||
RUN echo '#!/bin/sh\necho "$1"' > /usr/bin/ollama && \
|
||||
chmod +x /usr/bin/ollama
|
||||
|
||||
CMD ["./startProxy.sh"]</code></pre>
|
||||
<h4 id="startproxy-sh">startProxy.sh</h4>
|
||||
<pre><code class="language-sh">#!/bin/bash
|
||||
|
||||
pip install litellm
|
||||
|
||||
litellm --model ollama/mistral --api_base http://ollama.internal:11434 --drop_params</code></pre>
|
||||
<p>Собрать и запустить docker-контейнер можно с помощью этих двух команд:</p>
|
||||
<pre><code class="language-sh">docker build -t diy-ollama-proxy .
|
||||
docker run --net=host diy-ollama-proxy</code></pre>
|
||||
<p>После запуска вы получите API, который совместим с API от OpenAI и доступен по адресу <code>http://localhost:8000/</code>.</p>
|
||||
<h3 id='ollama-nvim'>
|
||||
Интеграция с NeoVim
|
||||
</h3>
|
||||
|
||||
<p>Языковые модели отлично умеют взаимодействовать с текстом, так что использование их в текстовом редакторе кажется разумной идеей.</p>
|
||||
<p>Мне не очень нравится идея Copilot, который зачем-то постоянно подсовывает тебе странные куски кода. Я пробовал использовать <a href="https://codeium.com/">Codeium</a> в ручном режиме, но оказалось, что странные куски кода по запросу мне тоже не очень нужны. Гораздо более привлекательной мне кажется возможность выделить существующий фрагмент текста или кода и попросить бездушную машину что-нибудь с ним сделать: упростить, дополнить, изменить или даже перевести с одного языка на другой. Идеальным для такого подхода оказался <a href="https://github.com/nomnivore/ollama.nvim">плагин ollama.nvim</a>.</p>
|
||||
<p>Кроме того, что он поддерживает кастомные промпты (в том числе интерактивные), он позволил мне обращаться к LLM, которая запущена на другом компьютере в локальной сети (для удобства я указал его адрес в <code>/etc/hosts/</code>).</p>
|
||||
<p>Установка и настройка с использованием пакетного менеджера lazy.nvim выглядит примерно так:</p>
|
||||
<pre><code>{
|
||||
'nomnivore/ollama.nvim',
|
||||
dependencies = {
|
||||
'nvim-lua/plenary.nvim',
|
||||
},
|
||||
cmd = { 'Ollama', 'OllamaModel' },
|
||||
keys = {
|
||||
{
|
||||
'<leader>j',
|
||||
':Ollama<CR>',
|
||||
desc = 'Ollama Menu',
|
||||
mode = { 'v' },
|
||||
},
|
||||
{
|
||||
'<leader>j',
|
||||
":lua require('ollama').prompt('Generate_Code')<cr>",
|
||||
desc = 'Ollama Code Generation',
|
||||
mode = { 'n' },
|
||||
},
|
||||
},
|
||||
opts = {
|
||||
model = 'mistral',
|
||||
url = 'http://ollama.internal:11434', -- see /etc/hosts
|
||||
prompts = {
|
||||
Ask_About_Code = false,
|
||||
Simplify_Code = false,
|
||||
Improve_Text = {
|
||||
prompt = 'Check the following sentence for grammar and clarity: "$sel".\nRewrite it for better readability while maintaining its original meaning.',
|
||||
extract = false,
|
||||
action = 'replace',
|
||||
},
|
||||
Modify_Text = {
|
||||
prompt = 'Modify this text in the following way: $input\n\n```$sel```',
|
||||
extract = false,
|
||||
action = 'replace',
|
||||
},
|
||||
Use_Selection_as_Prompt = {
|
||||
prompt = '$sel',
|
||||
extract = false,
|
||||
action = 'replace',
|
||||
},
|
||||
},
|
||||
},
|
||||
},</code></pre><p>В этом конфиге я выключил несколько дефолтных промптов и добавил несколько своих:</p>
|
||||
<ul>
|
||||
<li><code>Improve_Text</code> заменяет выделенный кусок текста «улучшенным».</li>
|
||||
<li><code>Modify_Text</code> является аналогом встроенного <code>Modify_Code</code> и позволяет делать с выделенным текстом всякие глупости. Например, заменить все числа на слова.</li>
|
||||
<li><code>Use_Selection_as_Prompt</code> просто заменяет выделенный текст на ответ от LLM.</li>
|
||||
</ul>
|
||||
<p>В итоге получается два сценария использования, оба доступны по <code><leader> + j</code>:</p>
|
||||
<ul>
|
||||
<li>В <code>normal</code> mode плагин спрашивает меня, какой код мне нужен, и вставляет его.</li>
|
||||
<li>В <code>visual</code> mode появляется меню действий над выделенным текстом.</li>
|
||||
</ul>
|
||||
<p>Как видно из конфига, я использую только <code>mistral</code>, но можно указать модель для кажого промпта и делегировать, например, манипуляции над кодом <code>codellama</code>, а операции над текстом — <code>llama2</code>.</p>
|
||||
<p>Возможность добавления кастомных промптов позволяет в будущем реализовать новые сценарии или вынести повторяющиеся действия в отдельный пункт меню или даже на отдельный шорткат.</p>
|
||||
<h2 id='update-delete'>
|
||||
Обновление и удаление
|
||||
</h2>
|
||||
|
||||
<p>Для обновления и удаления моделей можно использовать команды <code>pull</code> и <code>rm</code>:</p>
|
||||
<pre><code>docker exec -it ollama ollama pull mixtral
|
||||
docker exec -it ollama ollama rm mistral</code></pre><p>Я знаю, что для обновления и удаления docker-образов и docker-контейнеров тоже есть специальные команды (это тоже <code>pull</code> и <code>rm</code>), но каждый раз ленюсь в этом разобраться, просто сношу всё с помощью утилиты <a href="https://github.com/TomasTomecek/sen">sen</a> и разворачиваю нужное заново.</p>
|
||||
<h2 id='performance'>
|
||||
Производительность
|
||||
</h2>
|
||||
|
||||
<p>Для эксплуатации LLM требуется гораздо меньше ресурсов, чем для её обучения. Запустить 7b-модель средней тупости можно практически на любом CPU и 8 GB RAM, но нагрузка на систему и скорость генерации ответов часто будут далеки от комфортных значений.</p>
|
||||
<p>Например, на моём немолодом Intel Core i7-10510U @ 8x 4.9GHz неаккуратный запрос к <code>llama2</code> может заставить систему шуршать вентиляторами пару-тройку минут. При этом <code>phi</code> на этом же процессоре способна отвечать на какие-нибудь не очень сложные вопросы практически мгновенно.</p>
|
||||
<p>К счастью, у меня случайно завалялся MacBook на процессоре M1 и он уже показывает куда более впечатляющие результаты. <code>Mistral</code> даже на непростые запросы отвечает за считанные секунды, а в режиме чата токены вылетают на экран заметно быстрее, чем в веб-интерфейсе ChatGPT.</p>
|
||||
<p>Неприятным открытием стало то, что docker-версия Ollama на MacOS выполняется заметно медленнее (от 3 до 5 раз, если верить ощущениям), чем нативная. Возможно, всё дело в том, что я как-то неправильно настроил docker или приложение в контейнере нужно запускать с какими-нибудь специальными флагами для максимальной утилизации ресурсов. В любом случае, к порядку на этом ноутбуке я отношусь гораздо менее трепетно, поэтому просто установил и использую приложение с сайта Ollama.</p>
|
||||
<h2 id='why'>
|
||||
Зачем всё это нужно?
|
||||
</h2>
|
||||
|
||||
<p>Конечно, ChatGPT умнее и умеет из коробки гораздо больше.<br>
|
||||
Конечно, ChatGPT требует меньше телодвижений для использования.<br>
|
||||
Конечно, самые умные модели требуют внушительных ресурсов, ведь для запуска нашумевшей <a href="https://ollama.ai/library/mixtral">mixtral</a> или аналогичной модели нужно иметь 48 Gb оперативной памяти.<br>
|
||||
Конечно, сидя в кафе задать вопрос Bard от Google гораздо проще, чем достучаться до модели в закрытом ноутбуке, который остался дома.<br></p>
|
||||
<p>Я всё это прекрасно понимаю, но ничего из этого не стоит того, чтобы добровольно ставить себя в зависимость от монополистов с их закрытыми чёрными ящиками.</p>
|
||||
<p>Даже если закрыть глаза на все идеологические вопросы, то любая локальная LLM отличается от любого облачного провайдера тем, что:</p>
|
||||
<ul>
|
||||
<li>Может работать в оффлайне.</li>
|
||||
<li>Не хранит и не сливает вашу переписку.</li>
|
||||
<li>Не станет завтра тупее, чем есть сегодня.</li>
|
||||
<li>Не забанит тебя за возмутивший кого-то там запрос.</li>
|
||||
<li>Обладает тем уровнем цензуры, который выбрал ты сам.</li>
|
||||
</ul>
|
||||
<p>Я искренне рад, что для доступа даже к передовым технологиям, всё ещё не обязательно поступаться своей приватностью и своими свободами.</p>
|
||||
<hr>
|
||||
<p>Этот пост написан без использования LLM =)</p>
|
||||
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
2024-01-15
|
||||
</footer>
|
||||
|
||||
<script async
|
||||
data-goatcounter="https://he4et.goatcounter.com/count"
|
||||
src="https://gc.zgo.at/count.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
152
docs/posts/2024/wrapped_bw_ru/index.html
Normal file
152
docs/posts/2024/wrapped_bw_ru/index.html
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="/favicon.ico" sizes="32x32">
|
||||
<link rel="icon" href="/icon.svg" type="image/svg+xml">
|
||||
|
||||
|
||||
<title>
|
||||
wrapped bw | oddsquat
|
||||
</title>
|
||||
<meta name="description" content="Превращаем fully-featured Bitwarden command-line interface в удобный.">
|
||||
|
||||
<link rel="preload" href="/fonts/open_sans_condensed-32.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/fonts/open_sans_condensed-27.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/fonts/open_sans-25.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/fonts/open_sans-24.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/fonts/open_sans-17.woff2" as="font" type="font/woff2" crossorigin>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/css/fonts.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/typography.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/main.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="stripesContainer">
|
||||
<div class="stripes">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/">oddsquat</a></li>
|
||||
|
||||
|
||||
<li><a href="/posts/">
|
||||
posts</a></li>
|
||||
|
||||
|
||||
<li><a href="/posts/#2024">
|
||||
2024</a></li>
|
||||
|
||||
|
||||
<li>wrapped bw</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<article>
|
||||
<h1 id="-bitwarden-cli-fzf-">Интеграция Bitwarden CLI с fzf и буфером обмена</h1>
|
||||
<p>Менеджер паролей — это специальное приложение, которое помогает делать вид, что я помню разные пароли для разных аккаунтов, а не ввожу везде один и тот же. Мне нравится Bitwarden: открытый исходный код, возможность поднять собственный сервер, клиенты под разные устройства и расширения под разные браузеры.</p>
|
||||
<p>Самым удобным, внезапно, оказался клиент для Android, который не заставляет меня каждый раз вводить 12+ знаков мастер-пароля (такую длину требуют Bitwarden и здравый смысл), а может быть разблокирован с помощью биометрии. Похожего удобства захотелось достичь и на Linux.</p>
|
||||
<h2 id="-cli">Дикий CLI</h2>
|
||||
<p>На ноутбуке я использую <a href="https://bitwarden.com/help/cli/">Bitwarden CLI</a>. Это powerful, fully-featured tool, которым на практике оказалось не слишком удобно пользоваться, если ты человек.</p>
|
||||
<h3 id="-">Ключи от ключей</h3>
|
||||
<blockquote>
|
||||
<p>You are responsible for maintaining your session key.</p>
|
||||
</blockquote>
|
||||
<p>Bitwarden CLI поддерживает <a href="https://bitwarden.com/help/cli/#using-a-session-key">механизм сессий</a>, который призван избавить пользователя от бесконечного ввода мастер-пароля. Приложение позволяет разблокировать хранилище и получить временный сессионный ключ, который можно либо хранить в беззащитной переменной окружения, либо прикладывать к каждому запросу вручную.</p>
|
||||
<p>По сути своей, сессионный ключ отличается от мастер-пароля тем, что его можно моментально деактивировать, но совершенно невозможно запомнить, а, значит, нужно где-то хранить. Хочется делать это удобно и безопасно, а не в общедоступной переменной окружения.</p>
|
||||
<h3 id="-stdout">Пароли в stdout</h3>
|
||||
<blockquote>
|
||||
<p>The get command can only return one result, so you should use specific search terms. If multiple results are found, the CLI will return an error.</p>
|
||||
</blockquote>
|
||||
<p>Где-то в этот момент чтения документации я окончательно начал подозревать, что официальный CLI предназначен для скриптов: всё строго, никакого автодополнения, никакого интерактивного поиска, а пароли лаконично вываливаются в стандартный вывод терминала, откуда их ещё нужно как-то переправить в место назначения.</p>
|
||||
<h2 id="-cli">Приручение CLI</h2>
|
||||
<p>Может показаться, что я ругаюсь, но отсутствие удобств и излишеств в официальном CLI — это хорошо:</p>
|
||||
<ul>
|
||||
<li>Отсутствие фич всегда приятнее, чем кривые фичи.</li>
|
||||
<li>Минимализм упрощает жизнь мейнтейнерам.</li>
|
||||
<li>Минимализм повышает надёжность.</li>
|
||||
<li>Меньше сторонних зависимостей.</li>
|
||||
<li>Стандартные интерфейсы идеально подходят для автоматизации.</li>
|
||||
</ul>
|
||||
<p>Идея сделать Bitwarden CLI удобнее, разумеется, пришла в голову не только мне, так что на GitHub предсказуемо быстро нашёлся <a href="https://gist.github.com/loeschzwerg/c2b9d0b50f712a026aa6454af3b58598">скрипт-обёртка</a> от <a href="https://github.com/loeschzwerg">@loeschzwerg</a>. Этот ZSH-скрипт менее требователен к пользователю и позволяет в случае, когда под пользовательский поисковый запрос подходит несколько аккаунтов, выбрать нужный из списка с помощью fzf и автоматически скопировать логин, пароль и даже TOTP в буфер обмена.</p>
|
||||
<p>К сожалению, найденный скрипт никак не решал проблему управления сессиями, так что я решил его немного доработать, избавив заодно от избытка многоточий в интерфейсе.</p>
|
||||
<h3 id="-">«Безопасное» хранение сессионного ключа</h3>
|
||||
<p>Как я писал выше, мне нравится подход Android-клиента: нужно один раз ввести свой невероятно длинный мастер-пароль, после чего можно разблокировать хранилище отпечатком пальца. В ходе непродолжительных размышлений я решил, что самое простое и надёжное подобие для приложения в терминале — один раз получить сессионный ключ и сохранить его в файл, который будет доступен для чтения только пользователю <code>root</code> и недоступен любым другим приложениям, запущенным от имени текущего пользователя.</p>
|
||||
<p>Приятный бонус для владельцев биометрических сканеров: они отлично интегрируются с утилитой <code>sudo</code>.</p>
|
||||
<p>В результате скрипт обогатился двумя функциями и одной проверкой:</p>
|
||||
<pre><code class="language-zsh">local sessionfile="$HOME/.bitwarden_session"
|
||||
|
||||
get_saved_sessionkey () {
|
||||
sudo touch $sessionfile
|
||||
echo $(sudo cat $sessionfile)
|
||||
}
|
||||
|
||||
save_sessionkey () {
|
||||
local sessionkey=$1
|
||||
sudo chmod 600 $sessionfile
|
||||
sudo sh -c "echo $sessionkey > $sessionfile"
|
||||
}</code></pre>
|
||||
<pre><code>local sessionkey=$(get_saved_sessionkey)
|
||||
|
||||
if [[ -z $sessionkey ]] ; then
|
||||
# Get and save a new session key
|
||||
sessionkey=$(bw unlock --raw)
|
||||
save_sessionkey $sessionkey
|
||||
else
|
||||
echo "Using the existing session key from '$sessionfile'."
|
||||
fi</code></pre><p>При первом запуске сессионный ключ, полученный после ввода мастер-пароля, записывается в файл, который после выполнения команды <code>chmod 600</code> становится недоступен для чтения никому, кроме суперпользователя:</p>
|
||||
<pre><code>~ » ls -lah
|
||||
...
|
||||
-rw-------. 1 root root 89 Jul 24 22:15 .bitwarden_session
|
||||
...
|
||||
|
||||
~ » less .bitwarden_session
|
||||
.bitwarden_session: Permission denied</code></pre><p>Парольный менеджер и скрипт-обёртка запускаются от имени текущего пользователя, повышение привилегий требуется только в момент записи и чтения сессионного ключа.</p>
|
||||
<p>Деактивировать сохранённый ключ можно с помощью команды <code>bw lock</code>.
|
||||
К сожалению, я так и не понял, как с помощью утилиты <code>bw</code> можно проверить, валиден ли ключ, так что после деактивации придётся удалить файл <code>~/.bitwarden_session</code> вручную, иначе скрипт так и будет подставлять протухший сохранённый ключ, а <code>bw</code> будет каждый раз игнорировать его и настойчиво спрашивать мастер-пароль.</p>
|
||||
<p><strong>Update [2026-03-29]</strong>:
|
||||
Нормального способа проверить валидность сессионного ключа <a href="https://github.com/bitwarden/clients/issues/9254">всё ещё нет</a>,
|
||||
но я научил утилиту удалять файл с протухшим ключом по косвенным признакам.</p>
|
||||
<h2 id="-">Применять с осторожностью</h2>
|
||||
<p>Взаимодействие с менеджером паролей выглядит для меня теперь примерно так:</p>
|
||||
<pre><code>~ » bwc github
|
||||
[sudo] password for $USER:
|
||||
Using the existing session key from '/home/$USER/.bitwarden_session'.
|
||||
Searching for 'github'...
|
||||
|
||||
abcdefgh-ijkl-mnop-qrst-uvwxyz123456
|
||||
github.com
|
||||
|
||||
Username 'username' copied to clipboard.
|
||||
[Press any key to copy the password]
|
||||
Password copied to clipboard.</code></pre><p>Финальный вариант скрипта можно найти в репозитории <a href="https://github.com/He4eT/fuzzy-bitwarden-clipboard">He4eT/fuzzy-bitwarden-clipboard</a>.</p>
|
||||
<p>Настоятельно рекомендую читать любой код перед тем, как запускать его. Особенно в тех случаях, когда речь идёт о настолько чувствительных данных.</p>
|
||||
<p><strong>Важно!</strong> На системах без шифрования диска все эти танцы с правами на доступ к файлу не несут никакой пользы и превращают затею в увлекательный цирк.</p>
|
||||
<p>Нельзя исключать, что я что-то совершенно неправильно понимаю в принципах работы системы прав доступа в Linux и совершил какие-нибудь грубейшие, с точки зрения настоящих специалистов по информационной безопасности, ошибки. Пожалуйста, сообщите, если я где-то неправ.</p>
|
||||
<p>Нужно помнить, что такое упрощение жизни ведёт к новым рискам: теперь любой, кто знает ваш пароль для учётной записи системного пользователя и имеет доступ к компьютеру, будет также иметь доступ и ко всем паролям, сохранённым в Bitwarden.</p>
|
||||
<p>Пользуйтесь с осторожностью и/или храните свои пароли в надёжных местах =)</p>
|
||||
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
2024-07-27
|
||||
</footer>
|
||||
|
||||
<script async
|
||||
data-goatcounter="https://he4et.goatcounter.com/count"
|
||||
src="https://gc.zgo.at/count.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1326
docs/posts/2026/ugly_keyboards_ru/index.html
Normal file
1326
docs/posts/2026/ugly_keyboards_ru/index.html
Normal file
File diff suppressed because it is too large
Load diff
139
docs/posts/index.html
Normal file
139
docs/posts/index.html
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="/favicon.ico" sizes="32x32">
|
||||
<link rel="icon" href="/icon.svg" type="image/svg+xml">
|
||||
|
||||
|
||||
<title>
|
||||
posts | oddsquat
|
||||
</title>
|
||||
<meta name="description" content="Сomplete list of posts">
|
||||
|
||||
<link rel="preload" href="/fonts/open_sans_condensed-32.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/fonts/open_sans_condensed-27.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/fonts/open_sans-25.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/fonts/open_sans-24.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/fonts/open_sans-17.woff2" as="font" type="font/woff2" crossorigin>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/css/fonts.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/typography.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/main.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="stripesContainer">
|
||||
<div class="stripes">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/">oddsquat</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li>posts</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<article>
|
||||
<h1 id="posts">Posts</h1>
|
||||
<p>Announcements are available via <a href="/rss.xml">RSS</a>.</p>
|
||||
<hr>
|
||||
<h2 id="2026">2026</h2>
|
||||
<ul>
|
||||
<li><article class='entry'>
|
||||
<header>
|
||||
[ru]
|
||||
<strong>
|
||||
<a href='/posts/2026/ugly_keyboards_ru/'>ugly keyboards</a>
|
||||
</strong>
|
||||
</header>
|
||||
<section class='description'>
|
||||
Почему нас окружают уродливые клавиатуры и что с этим можно сделать.
|
||||
</section>
|
||||
</article>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
<h2 id="2024">2024</h2>
|
||||
<ul>
|
||||
<li><article class='entry'>
|
||||
<header>
|
||||
[ru]
|
||||
<strong>
|
||||
<a href='/posts/2024/wrapped_bw_ru/'>wrapped bw</a>
|
||||
</strong>
|
||||
</header>
|
||||
<section class='description'>
|
||||
Превращаем fully-featured Bitwarden command-line interface в удобный.
|
||||
</section>
|
||||
</article>
|
||||
</li>
|
||||
<li><article class='entry'>
|
||||
<header>
|
||||
[ru]
|
||||
<strong>
|
||||
<a href='/posts/2024/selfhosted_llm/'>selfhosted LLM</a>
|
||||
</strong>
|
||||
</header>
|
||||
<section class='description'>
|
||||
Персональные LLM в docker-контейнере на твоём компьютере.
|
||||
</section>
|
||||
</article>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
<h2 id="2020">2020</h2>
|
||||
<ul>
|
||||
<li><article class='entry'>
|
||||
<header>
|
||||
[ru]
|
||||
<strong>
|
||||
<a href='/posts/2020/typographic_linter/'>typographic linter</a>
|
||||
</strong>
|
||||
</header>
|
||||
<section class='description'>
|
||||
Prettier для текста. Автоматизация рутинной типографики.
|
||||
</section>
|
||||
</article>
|
||||
</li>
|
||||
<li><article class='entry'>
|
||||
<header>
|
||||
[ru]
|
||||
<strong>
|
||||
<a href='/posts/2020/initial_post/'>initial post</a>
|
||||
</strong>
|
||||
</header>
|
||||
<section class='description'>
|
||||
Какие инструменты были использованы для создания этого сайта, какие решения были приняты и почему.
|
||||
</section>
|
||||
</article>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
|
||||
<script async
|
||||
data-goatcounter="https://he4et.goatcounter.com/count"
|
||||
src="https://gc.zgo.at/count.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue