Javascript + Программирование

Исследователи Google Deep Mind провели анализ сообщений о случаях мошенничества с использованием ИИ и выяснили, для каких преступлений чаще всего используются возможности GenAI. Спойлеры:

• Самый популярный вид кибермошенничества с применением ИИ – имперсонация, когда злоумышленники с помощью дипфейк-технологий притворяются другими людьми.

• Один из самых впечатляющих случаев мошенничества произошел в феврале 2024 года в Гонконге, когда злоумышленникам удалось убедительно подделать видеоконференцию с участием нескольких лиц. Все участники, включая фальшивого финансового директора, выглядели настолько естественно, что ничего не подозревающий сотрудник послушно перевел $25,6 млн на подставной счет.

Еще один из отцов-основателей OpenAI, Джон Шульман, перешел в Anthropic.

Компания Groq, разработавшая уникальный супербыстрый LPU (языковой процессор), получила $640 млн инвестиций и оценку в $2,8 млрд, что свидетельствует о фундаментальном сдвиге в индустрии ИИ-инфраструктуры – Groq стал серьезным конкурентом для NVIDIA.

На опенсорсной платформе LMSYS Chatbot Arena, где ИИ-компании часто тестируют предстоящие релизы, появился некий anonymous-chatbot, который превосходит GPT-4o и остальные крупнейшие модели и, возможно, является секретным проектом Q*/Strawberry от OpenAI. На это намекнул Альтман.

Новая модель роботов-гуманоидов Figure 02 успешно прошла тестирование на заводе BMW. Робот поддерживает диалог благодаря генеративному ИИ от OpenAI, может поднимать до 25 кг, выполняет задачи автономно и работает 8 часов без подзарядки.

На платформе Mistral теперь можно создать собственных ИИ-агентов, имеющих такую же функциональность, как кастомные GPT.

Феноменальный успех ChatGPT сделал Сэма Альтмана одним из самых влиятельных людей в мире, и это должно внушать серьезное беспокойство всем нам. По наблюдениям Гэри Маркуса, которые он подробно изложил в разоблачительной статье, директору OpenAI и деятельности его компании нельзя доверять:

• Во время слушаний по вопросам регулирования ИИ в сенате США Альтман предоставил неполную и неискреннюю информацию и солгал, отвечая на вопрос о том, получает ли он прибыль от OpenAI. Альтман буквально сказал, что получает денег «достаточно для оплаты медстраховки». При этом один автомобиль из его обширного автопарка, Koenigsegg Regera, стоит не менее $4 млн.

• Несмотря на публичные заявления Альтмана о необходимости регулирования ИИ, на деле OpenAI активно лоббирует ослабление регулирования.

• OpenAI не уделяет достаточного внимания вопросам безопасности ИИ, что подтверждается уходом нескольких ключевых сотрудников, занимавшихся безопасностью.

• Деятельность OpenAI подразумевает использование огромных объемов электроэнергии, воды и других ресурсов. Такое же безответственное отношение к ресурсам переняли все конкуренты OpenAI – от Anthropic до Microsoft. Никто не пытается «озеленить» ИИ-индустрию.

• Технологии OpenAI активно используются для создания политической дезинформации – компания признала несколько инцидентов, но не предпринимает видимых усилий для предотвращения подобных случаев.

Илон Маск снова решил судиться с OpenAI и ее основателями – Сэмом Альтманом и Грэгом Брокманом. Юридическая команда Маска утверждает, что Альтман и Брокман «усердно манипулировали Маском», убеждая его стать соучредителем их якобы благотворительной организации, обещая безопасность и прозрачность OpenAI, что отличало ее от альтернатив, ориентированных на прибыль. Иск выходит за рамки простых договорных споров, поскольку содержит серьезные юридические обвинения, включая финансовое мошенничество, нарушение договора, сетевое мошенничество и даже нарушение RICO («Закона о коррумпированных и находящихся под влиянием рэкетиров организациях»).

Привет!

Мы запустили еженедельную email-рассылку, посвященную последним новостям и тенденциям в мире искусственного интеллекта. Наша цель – держать подписчиков в курсе самых интересных открытий, исследований и приложений ИИ.

В еженедельных письмах ты найдешь:

• Новости о прорывных исследованиях в области машинного обучения и нейросетей.

• Материалы о применении ИИ в разных сферах – медицине, бизнесе, науке, производстве и образовании.

• Статьи об этических аспектах развития технологий.

• Подборки лучших онлайн-курсов и видеолекций по машинному обучению.

• Обзоры инструментов и библиотек для разработки нейронных сетей.

• Ссылки на репозитории с открытым исходным кодом ИИ-проектов.

• Фильмы, сериалы и книги, которые заслуживают внимания AI-энтузиастов.

🛠️ Инструменты

MinusX – Chrome-расширение для анализа данных в Jupyter и Metabase.

Frontend AI – генерирует код UI-компонентов по текстовым описаниям и скриншотам, поддерживает редактирование.

Pictory – превращает любой контент в видеоклипы.

Semantic Scholar – бесплатный ИИ-поисковик по огромной базе (220,2 млн +) научных публикаций из всех отраслей науки. Имеет API для использования в собственных приложениях.

Napkin AI – визуализирует информацию в виде любой бизнес-графики – диаграмм, схем, графиков, презентаций и т. д.

AIswers – платформа, на которой можно задавать вопросы множеству ИИ-моделей одновременно.

Spreadsite – превращает данные из CSV-файлов в интерактивные дашборды и сайты.

GummySearch – находит Reddit-сообщества, попадающие под описание целевой аудитории продукта.

Rosebud – личный коуч и психолог.

✍️ Сделай сам

На Hugging Face выпустили опенсорсную модель CogVideoX-2B для генерации видео, по качеству сопaоставимую с Sora.

MiniCPM-V – опенсорсная минимодель, которая имеет всего 8 млрд параметров и работает на смартфоне, но при этом превосходит GPT-4V в понимании содержимого изображений и видео в реальном времени.

Flux – модель, разработанная командой, создавшей Stable Diffusion. По многочисленным отзывам, во многом превосходит Midjourney и DALL-E. И самое главное – ее можно установить на свой комп и даже на приличный игровой ноутбук. Протестировать можно на платформе NightCafe.

25 опенсорных инструментов для использования в ИИ-проектах

Vanna – Python-библиотека, которая позволяет автоматически писать SQL-запросы и задавать базе данных вопросы на естественном языке.

Khoj – AI-помощник для поиска информации. Понимает разные форматы файлов, включая Word, PDF, Markdown и другие, а также интегрируется с платформами вроде Notion.

Flowise – визуальный конструктор для построения пользовательских потоков управления языковыми моделями и AI-агентами.

LLAMA GPT – локальный и автономный чат-бот, похожий на ChatGPT.

LocalAI – API-сервер, совместимый с API OpenAI, который позволяет запускать языковые модели, генерировать изображения и аудио локально или на своей инфраструктуре без использования GPU.

Continue – один из лучших AI-ассистентов для написания кода. Он позволяет подключать разные модели и контексты, чтобы создавать пользовательские автодополнения и чат-интерфейсы внутри VS Code и JetBrains IDE.

Chat2DB – ИИ-платформа для управления данными, разработки и анализа. Может конвертировать естественный язык в SQL (и наоборот), а также автоматически генерировать отчеты.

LibreChat – продвинутая платформа для создания собственного интерфейса для чат-ботов. Она предлагает множество настроек и поддержку разных AI-провайдеров, сервисов и интеграций, предоставляет единый интерфейс для общения с несколькими AI-ассистентами.

Lobe Chat – фреймворк для создания чат-интерфейсов с языковыми моделями. Он поддерживает речевой синтез, мультимодальность и расширяемую систему плагинов.

MindsDB – платформа для настройки AI на основе корпоративных данных. Она позволяет развертывать, обслуживать и настраивать модели в режиме реального времени, используя данные из баз данных, векторных хранилищ или сторонних приложений.

AutoGPT – полуавтономный агент, способный автоматизировать сложные процессы, выполняя последовательности действий без постоянного вмешательства человека.

reor – ИИ-приложение для ведения заметок. Автоматически связывает заметки, отвечает на вопросы и обеспечивает семантический поиск. Все данные хранятся локально, а редактирование заметок происходит в Markdown-редакторе, похожем на Obsidian.

Leon – персональный ассистент, который может работать на вашем сервере. Выполняет разные задачи по вашему запросу и может общаться голосом или текстом. Имеет модульную структуру навыков, которую при желании можно расширить.

Instrukt – терминальная среда с интегрированным ИИ. Позволяет создавать и инструктировать модульных AI-агентов, генерировать индексы документов для ответов на вопросы и назначать инструменты для любого агента.

Quivr – RAG-фреймворк для создания специализированных AI-ассистентов с разными возможностями.

Open Interpreter – интерфейс, который позволяет отдавать компьютеру команды на естественном языке в терминале и дает возможность LLM выполнять код (Python, JavaScript, Shell и т. д.).

CopilotKit – фреймворк для создания пользовательских AI-помощников в React-приложениях.

GPT Engineer – инструмент, который позволяет вам описать нужное приложение на естественном языке, а затем наблюдать, как AI пишет, выполняет и вносит улучшения в код.

Dalai – самый простой инструмент для запуска моделей Llama* и Alpaca локально на вашем компьютере.

OpenLLM – инструмент, позволяющий с помощью одной команды запускать любые опенсорсные LLM в виде API-эндпоинтов. Поддерживает множество моделей и оптимизирован для использования в высоконагруженных приложениях.

Unsloth – ускоряет процесс тонкой настройки больших языковых моделей (Llama-3*, Mistral, Phi-3 и Gemma). Позволяет проводить файнтюнинг в два раза быстрее, используя на 70% меньше памяти, без потери точности.

E2B – предоставляет безопасную среду (песочницу) для AI-агентов и приложений. Это особенно полезно при создании ИИ-приложений с возможностями выполнения кода.

Camel AI – фреймворк, предлагающий масштабируемый подход к созданию систем с несколькими AI-агентами, которые могут эффективно взаимодействовать друг с другом.

Aider – ИИ-напарник программиста, который работает в терминале. Он может начинать новые проекты, умеет редактировать файлы и работать с существующими Git-репозиториями. Aider совместим со всеми популярными моделями (GPT-4, Sonnet 3.5, DeepSeek Coder, Llama 70b и другими).

FastEmbed – быстрая и легкая Python-библиотека для генерации эмбеддингов (векторных представлений) документов. Она использует ONNX runtime вместо PyTorch, что и делает ее быстрее традиционных решений.

Автор рассылки: Наталья Кайда

• Динамическое создание контента – можно добавлять новые элементы на страницу без перезагрузки.

• Гибкость – можно легко генерировать HTML на основе данных, полученных от пользователя или с сервера.

• Шаблонизацию – поскольку упрощает создание повторяющихся структур HTML.

• Управление интерфейсом – помогает создавать интерактивные элементы, которые реагируют на действия пользователя.

Почти все современные JavaScript-фреймворки и библиотеки предоставляют удобные инструменты для создания DOM-элементов из HTML-строк – это одна из основных задач, которую они решают. Если же нужно обойтись возможностями ванильного JavaScript, то это можно сделать несколькими разными способами.

innerHTML

Это самый известный метод: он позволяет вставить строку HTML внутрь атрибута innerHTML контейнера и затем получить доступ к созданному узлу DOM. Однако он может обрабатывать только допустимые узлы HTML – к примеру, попытка вставить элемент <tr> в <div> приведет к тому, что узел не будет создан. Кроме того, этот метод не выполняет скрипты в HTML-строках, что делает его безопасным при работе с непроверенным содержимым.

innerHTML + template

Использование тега <template> снимает ограничения на содержимое – он может содержать любую HTML-структуру, включая элементы, связанные с таблицами – <tr> и <td>.

insertAdjacentHTML

Как и innerHTML, этот метод обрабатывает только допустимые HTML-узлы и не выполняет скрипты.

DOMParser

Этот метод работает медленнее остальных, поскольку он разбирает строку, создавая полный HTML-документ, и только потом извлекает узел из документа. Он также может обрабатывать только допустимые узлы HTML и не выполняет скрипты.

Range.createContextualFragment

Самый простой, но не безопасный метод – выполняет скрипты. Поэтому при его использовании необходимо очищать данные для защиты от XSS – например, с помощью DOMPurify.

🦮 Интерактивные гайды

Гайд по SVG

SVG-графика предоставляет нам стандартизированный способ создания изображений и иконок, которые можно отображать в любом размере без потери качества изображения. Но разобраться в методах SVG не так-то просто. На помощь придет интерактивный справочник SSSVG.

К слову, возможности SVG простираются за пределы создания векторных картинок и лого: энтузиасты умудрились сделать «Тетрис» в виде одного SVG-файла.

Гайд по :has() в CSS

Псевдокласс :has() открывает новые возможности для творческих экспериментов в CSS, позволяя создавать сложные и интерактивные дизайны без использования JavaScript. Это первый родительский селектор, позволяющий стилизовать элемент в зависимости от его содержимого. Все невероятные возможности :has() продемонстрированы в интерактивном гайде CSS :has() Interactive Guide.

🪚 Инструменты

Plasmic – опенсорсный визуальный конструктор для создания сайтов и веб-приложений на React со множеством функций:

• Можно интегрировать с существующими React-проектами.

• Можно использовать как CMS.

• Позволяет подключать разные источники данных и бэкенд-сервисы.

• Совместим с Next.js и Gatsby.

• Поддерживает оптимизацию производительности, включая статическую генерацию сайтов и оптимизацию изображений.

article-extractor – эта библиотека Node.js извлекает текст статей, метаданные и ссылки на изображения по URL.

Turndown – Node.js-библиотека для конвертирования HTML в Markdown. Отлично работает в связке с предыдущим инструментом.

15 полезных расширений VS Code для фронтендера

• Auto Rename Tag – при переименовании HTML-тега автоматически обновляет парный тег.

• Code Spell Checker – находит опечатки в именах переменных и других идентификаторах.

• DotEnv – добавляет цветовое оформление и улучшает читаемость файлов с переменными окружения.

• Docker – добавляет вкладку для удобной работы с контейнерами, если вы используете Docker.

• ESLint – выявляет проблемы в коде (нарушения форматирования или потенциальные ошибки) на лету.

• Figma – позволяет встраивать и просматривать файлы дизайна Figma прямо в VS Code.

• GitHub Copilot – предлагает AI-генерируемые подсказки во время набора кода.

• Copilot Chat – предоставляет окно чата в стиле ChatGPT прямо в редакторе.

• GraphQL – набор расширений, упрощающих работу с GraphQL.

• Import Cost – показывает размер импортируемых пакетов, помогая выявить потенциальное раздувание кода.

• Live Server – запускает локальный сервер с автоматической перезагрузкой, что удобно для предварительного просмотра изменений.

• Live Share – позволяет программировать в команде с другими разработчиками, работая в одном редакторе в реальном времени.

• Markdown Preview Enhanced – предоставляет живой предпросмотр Markdown-файлов во время редактирования.

• Notes – удобный блокнот для хранения заметок по проекту, инструкций по настройке и т. д.

• Hinty – предоставляет динамические подсказки в реальном времени. Помогает избегать повторения распространенных ошибок и соблюдать стандарты написания кода в команде.

⚛️ Как выбрать оптимальную стратегию рендеринга

Рендеринг – это процесс превращения кода в контент. За годы развития интернета эта технология прошла долгий путь – от формирования простейших HTML-страниц на стороне сервера до динамического обновления интерактивных приложений без перезагрузки. Сейчас в ходу несколько методов рендеринга:

• Генерация статических сайтов (предварительно генерирует HTML-страницы во время сборки приложения).

• Генерация на стороне сервера (генерирует полный HTML для страницы при каждом запросе).

• Генерация на стороне клиента (использует JavaScript для рендеринга контента в браузере пользователя).

• Инкрементальная статическая регенерация (позволяет обновлять отдельные страницы после сборки сайта).

• Частичный пререндеринг (экспериментальный подход, который стремится автоматически оптимизировать стратегии рендеринга).

Эти методы по-разному подходят к оптимизации работы приложения, SEO и пользовательского опыта. Их можно комбинировать – это позволяет по максимуму использовать сильные стороны, нивелировать недостатки и обеспечить оптимальный баланс производительности, свежести данных и интерактивности. Разработчики Vercel (эта компания создала Next.js) написали подробную статью о преимуществах и недостатках каждого подхода и о том, как их лучше комбинировать.

Генератор статических сайтов (SSG)

Идеально подходит для страниц с редко меняющимся контентом, макетов сайтов, документации и лендингов, для которых важна максимальная скорость загрузки.

Преимущества:

• Самая быстрая загрузка страниц.

• Отличные показатели SEO.

• Самая низкая нагрузка на сервер.

• Низкие затраты на инфраструктуру.

Недостатки:

• Увеличенное время сборки для сайтов с большим количеством страниц.

• Обновление контента требует новой сборки и развертывания.

Рендеринг на стороне сервера (SSR)

Идеально подходит для персонализированных дашбордов, лент соцсетей и визуализации данных в реальном времени.

Преимущества:

• Всегда отдает свежий, актуальный контент.

• Показатели SEO и времени загрузки данных лучше, чем при рендеринге на стороне клиента.

Недостатки:

• Загрузка происходит медленнее, чем при использовании SSG или ISR.

• Показатель времени до первого байта (TTFB) может быть неудовлетворительным.

• Потребляет больше серверных ресурсов.

Инкрементальная статическая регенерация (ISR)

Подходит для случаев, когда сборка с SSG занимает слишком много времени. Используется для страниц продуктов в e-commerce, новостных порталов и крупных контентных сайтов.

Преимущества:

• Сохраняет быструю загрузку страниц, как у SSG.

• Позволяет обновлять контент по требованию без полной пересборки.

• Эффективно масштабируется на большое количество страниц.

• Может быть экономичнее, чем SSR, в некоторых случаях.

Недостаток:

• Требует тщательного управления стратегиями инвалидации кэша.

Рендеринг на стороне клиента (CSR)

Подходит для интерактивных элементов страницы, требующих немедленной обратной связи, админ-панелей с данными в реальном времени и приложений типа Notion, которые непрерывно синхронизируют вводимые пользователем данные с сервером.

Преимущества:

• Самый интерактивный пользовательский опыт.

• Плавные переходы между состояниями приложения.

• Взаимодействие с внешними данными в реальном времени.

Недостатки:

• Начальная загрузка может быть медленнее из-за необходимости загрузки JavaScript-бандла.

• Оптимизация Core Web Vitals может быть сложной.

• Требует тщательного управления состоянием на клиенте.

Частичный пререндеринг (PPR)

PPR призван объединить преимущества других стратегий рендеринга и потенциально может стать стандартным подходом для веб-приложений в будущем.

Преимущества:

• Мгновенная загрузка страницы (как у SSG).

• Плавная потоковая передача динамического контента.

• Улучшенная производительность с меньшими затратами на разработку.

Недостатки:

• Все еще находится в стадии исследований и разработки.

• Может потребовать рефакторинга кода для включения в существующий проект.

Выбор стратегии рендеринга

При выборе стратегии рендеринга нужно учитывать следующие факторы.

Как часто обновляется контент?

• Статический контент лучше всего обрабатывать генератором статических сайтов.

• Для вывода периодически обновляемого контента отлично подходит инкрементальная статическая регенерация.

• Обновление контента в реальном времени требует серверного или клиентского рендеринга.

Для повышения производительности нужно стремиться к максимальному использованию SSG и ISR, прибегая к SSR только в случае необходимости получения абсолютно свежих данных.

Насколько важно продвижение страницы в поисковых системах?

• Хотя Google может рендерить JavaScript на стороне клиента, ключевые показатели Core Web Vitals все еще сильно влияют на ранжирование.

• Высоких показателей CWV легче добиться на статических и серверных страницах, чем на страницах с клиентской загрузкой внешних данных.

Насколько активно пользователь будет взаимодействовать со страницей?

• Если страница в основном статическая с минимальным взаимодействием, используйте SSG или ISR с небольшим количеством клиентского JavaScript.

• В противном случае может потребоваться SSR (с гидратацией на стороне клиента).

Каковы требования к скорости загрузки?

• Для максимально быстрой начальной загрузки используйте SSG или ISR с редкой инвалидацией.

• Чтобы сбалансировать свежесть данных и скорость, используйте ISR или SSR (для актуальных данных).

• CSR может обеспечить данные в реальном времени, но часто за счет начальной загрузки.

Нужно ли персонализировать контент?

• Если вам нужен персонализированный контент, скорее всего, потребуется SSR или CSR.

• ISR может работать в случаях, когда можно кэшировать персонализированный контент, например, настройки веб-приложения.

• SSG не позволяет персонализировать контент.

Автор рассылки: Наталья Кайда

SSR является одной из ключевых особенностей Next.js, но он также добавляет сложности. Обеспечение корректного рендеринга компонентов на сервере и клиенте может быть сложной задачей, особенно при работе с сторонними библиотеками, которые не поддерживают SSR.

Решение:

• Условный рендеринг: Используйте условный рендеринг, чтобы убедиться, что компоненты, зависящие от клиентских функций (например, объекта window), выполняются только на стороне клиента.

• Библиотеки, совместимые с SSR: Выбирайте библиотеки, которые явно поддерживают SSR или имеют серверобезопасные альтернативы.

3. Маршрутизация и динамические маршруты

Next.js предлагает систему маршрутизации на основе файлов, которая одновременно мощна и ограниченна. Обработка динамических маршрутов и вложенной маршрутизации может стать затруднительной, особенно при работе с большим количеством маршрутов.

Решение:

• Динамический импорт: Используйте динамический импорт для разделения кода и обработки сложных сценариев маршрутизации.

• Организация маршрутов: Логически организуйте свои маршруты и рассматривайте возможность использования вложенных папок для управления сложностью.

4. Управление состоянием

Управление состоянием в приложении Next.js может быть сложным, особенно когда нужно делиться состоянием между серверными страницами и клиентскими компонентами. Библиотеки, такие как Redux или Context API, могут помочь, но они добавляют еще один уровень сложности.

Решение:

• Библиотеки управления состоянием: Используйте хорошо документированные библиотеки управления состоянием, которые хорошо интегрируются с Next.js.

• Синхронизация сервера и клиента: Убедитесь, что изменения состояния на сервере и клиенте синхронизированы, возможно, с использованием промежуточного ПО для обработки извлечения данных и обновлений состояния.

5. Стратегии извлечения данных

Next.js предоставляет несколько методов для извлечения данных, таких как getStaticProps, getServerSideProps и маршруты API. Выбор правильной стратегии для нужд вашего приложения может быть запутанным и может потребовать значительного рефакторинга при изменении требований.

Решение:

• Понимание сценариев использования: Четко понимаете, когда использовать каждый метод извлечения данных в зависимости от требований вашего приложения.

• Инкрементальная статическая регенерация (ISR): Используйте ISR для страниц, которым требуется актуальная информация, но которые не нужно перерендеривать при каждом запросе.

6. Оптимизация производительности

Оптимизация производительности приложения на Next.js включает в себя несколько аспектов, от уменьшения размера пакетов до обеспечения эффективного серверного рендеринга. Плохо оптимизированные приложения могут страдать от медленной загрузки и посредственного пользовательского опыта.

Решение:

• Анализ производительности: Используйте инструменты, такие как Lighthouse и Webpack Bundle Analyzer, для выявления узких мест производительности.

• Разделение кода: Реализуйте разделение кода и ленивую загрузку для уменьшения времени начальной загрузки.

• Стратегии кэширования: Используйте эффективные стратегии кэширования как на сервере, так и на клиенте для улучшения производительности.

7. Развертывание и хостинг

Развертывание приложения на Next.js требует внимательного подхода к выбору среды хостинга. Хотя Vercel, создатели Next.js, предлагают простые варианты развертывания, использование других платформ может потребовать дополнительной конфигурации.

Решение:

• Vercel: Рассмотрите использование Vercel для самого простого опыта развертывания с автоматическими оптимизациями.

• Пользовательские развертывания: Для пользовательских настроек убедитесь, что ваша серверная среда правильно настроена для обработки SSR и маршрутов API.

Заключение

Создание приложений с использованием Next.js может быть чрезвычайно полезным, предоставляя мощный фреймворк с передовыми функциями для современной веб-разработки. Однако важно быть осведомленным о потенциальных сложностях и иметь знания и инструменты для их эффективного решения. Понимая эти трудности и применяя лучшие практики, вы сможете использовать Next.js для создания мощных, производительных и масштабируемых приложений.

Не стесняйтесь делиться своим опытом или дополнительными советами по преодолению трудностей разработки на Next.js!