[컴][머신러닝] 생성형 AI 에 대한 대략적인 설명

generative AI / 설명 / 간략설명 / 이해

생성형 AI 에 대한 대략적인 설명

경제지 economist 에서 생성형AI 에 대해 간략하게 이야기해주고 있다. 생성형 AI 가 어떻게 동작하는지 이해를 도와줘서 옮겨놓는다. 개인적으로 필요한 부분만 옮겨놓은 것이라서, 완전한 글은 본문을 참고하자.

기사

from : How AI models are getting smarter, 2024-08-06

뉴런들을 네트워크에 연결하고, 뉴런들을 네트워크에 계층화하는 여러방법이 있다.
이런 아키텍쳐의 발전이 좀 더 학습이 쉽고, 좀 더 나은 결과를 가져다 주는 신경망을 만드는 데 도움이 됐다.

현재 관심은 text를 위한 LLM(Large language model)과 image를 위한 diffusion model 들에 집중되어 있다.
이 모델들은 이전 모델들보다 더 많은 뉴런층을 가지고 있으며, 방대한 데이터를 빠르게 처리할 수 있는 방식으로 구성됐다.

transformer architecture 를 기반으로 LLM 들이 만들어졌다. 트랜스포머는 2017년에 Google Brain의 아시시 바스와니와 그의 팀이 소개했는데, 이 트랜스포머의 핵심 원리는 ‘attention’(주의) 이다.
attention layer는 모델이 입력값들의 여러 측면들 — 예를 들면, 텍스트에서 서로 일정한 거리에 있는 단어들 — 이 서로 어떻게 연결되어 있는지를 학습할 수 있게 해준다. 그리고 이를 output을 만드는 과정에 반영할 수 있도록 해준다.

한 row 에 많은 attention layer들이 있으면, 모델은 단어, 구(phrase) 심지어 문단 사이에 있는 다양한 수준의 세밀한부분에서(at different levels of granularity) 연관성을 학습할 수 있게 된다.

transformer 기반의 모델들은 text뿐만 아니라 image 도 생성할 수 있다.
OpenAI 가 2021년에 출시한 DALL-E 의 첫번째 버전은 이미지의 픽셀 그룹간의 연관성을 학습하는 트랜스포머였다.
신경망은 그것이 보는 것을 숫자로 변환하고, 이에 대해 수학(특히, 행렬연산)을 행한다.

트랜스포머에는 한계가 있다. 일관되게 세계(world)를 표현하는 model 을 학습하는 것이 어렵다.
이 트랜스포머 기반 모델은 인간의 질문에 답할 때, 한 답변에서 다음 답변으로 넘어가면서 스스로 모순된 답변을 할 수 있다. 이것은 첫번째 답변이 두 번째 답변을 모순되게 만든다는 것을 이해하지 못하기 때문이다.
이 모델은 실제로 그 답변을 이해해서 알고있는 것이 아니라, 단순히 답변처럼 보이는 특정 문자열들의 연관성만 알고 있기 때문이다.

트랜스포머 기반 모델은 잘못된 답을 만들고, 그럴 듯한 가짜 인용을 만들어내는 ‘환각’(hallucinations)이 발생하기 쉽다.
마찬가지로, 초기 트랜스포머 기반 모델에서 생성된 이미지는 종종 물리 법칙을 위반하고 받아드리기 어려운 경우가 많았다(일부 사용자에게는 기능일 수 있지만 사실적인 이미지를 생성하려는 디자이너에게는 버그였다). 다른 종류의 모델이 필요했다.

diffusion model(확산 모델)들은 훨씬 더 사실적인 이미지를 생성할 수 있다.
diffusion model의 주요아이디어는 확산의 물리적과정에서 영감을 받았다. 뜨거운 물 한 컵에 티백을 넣으면 찻잎이 가파르게 가라앉기 시작하고, 차의 색이 맑은 물로 스며들어 흐려진다. 몇 분 동안 그대로 두면 컵에 담긴 액체가 균일한 색을 띠게 된다.

이 확산 과정은 물리 법칙에 의해 결정된다. 물리 법칙을 사용하여 차가 어떻게 확산될지 예측할 수 있는 것처럼, 이 과정을 역설계하여 티백이 처음 어디에 어떻게 떨어졌을지 재구성할 수도 있다. 현실에서는 이미 벌어진 일을 뒤로 돌릴 수 없지만, 엔트로피를 역전시키는 과정을 시뮬레이션하는 법을 학습하면 사실적인 이미지 생성이 가능해진다.

훈련(training)은 다음과 같이 작동한다.
이미지를 가져와서 완전히 무작위로 보일 때까지 점점 더 많은 흐림(blur)과 노이즈를 적용합니다. 그 다음, 이부분이 어려운 부분인데, 이 과정을 역으로 진행하여 차에서 티백을 찾아내는 것처럼 원본 이미지를 다시 만드는 것이다.

이 작업은 “self-supervised learning”(자기 지도 학습)을 통해 이뤄진다. text에서 LLM이 훈련되는 방식과 유사하다.
그것은 문장에서 단어를 가리고, 시도와 오류(trial and error)를 통해 누락된 단어를 예측하는 방법이다.

이미지의 경우, 네트워크는 원본 이미지를 재생산하기 위해 점점 더 많은 양의 노이즈를 제거하는 방법을 학습한다. 수십억 개의 이미지를 처리하면서 왜곡을 제거하는 데 필요한 패턴을 학습하게 되면, 네트워크는 아무것도 없는 무작위 노이즈에서 완전히 새로운 이미지를 생성할 수 있는 능력을 얻게 된다.

대부분의 최첨단 이미지 생성 시스템은 디퓨전 모델을 사용하지만, 노이즈 제거 또는 왜곡을 역전(reversing distortions)시키는 방식은 서로 다르다.

2022년에 출시된 Stable Diffusion(Stability AI의)과 Imagen은 모두 컨볼루션 신경망(CNN)이라는 아키텍처의 변형을 사용했습니다. CNN은 그리드 형태의 데이터를 분석하는 데 뛰어납니다. 픽셀의 행과 열 같은.
실제로 CNN은 입력된 데이터에서 작은 슬라이딩 창을 위아래로 움직이며 패턴이나 모서리와 같은 특정 객체(artefacts)를 찾는다.

CNN은 픽셀에서 잘 작동하지만, 최신 이미지 생성기 중 일부는 확산 트랜스포머(difffusion transformers)를 사용한다. 스테이빌리티 AI의 최신 모델인 Stable Diffusion 3가 여기에 포함된다. 확산에 대한 훈련을 받은 트랜스포머는 이미지나 비디오 프레임의 다양한 부분이 서로 어떻게 연관되어 있는지, 그리고 얼마나 강하게 또는 약하게 연결되어있는지를 훨씬 더 잘 알아낼 수 있어서 보다 사실적인 결과물을 만들어낸다.(여전히 실수가 있긴 하지만).

추천시스템(Recommendation systems) 은 다른 문제다.(kettle of fish)
이러한 시스템의 추천 알고리즘을 구축하고 사용하는 회사들은 추천 알고리즘에 대해 극도로 비밀을 유지하기 때문에 내부 구조를 엿볼 기회는 드물다.

그러나 2019년 Meta(당시 Facebook)는 자사의 딥러닝 추천 모델(DLRM)에 대한 세부 정보를 공개했다. 이 모델은 세 가지 주요 부분으로 구성되어 있다.

  1. 입력(예를 들어 사용자의 나이, 플랫폼에서의 ‘좋아요’, 또는 소비한 콘텐츠 등)을 ’임베딩(embeddings)’으로 변환합니다.
  2. 이 임베딩 공간에서 유사한 것들(예를 들어 테니스와 탁구)이 서로 가까운 위치에 있도록 학습합니다.
  3. 그런 다음 DLRM은 신경망을 사용하여 행렬 인수분해(matrix factorisation)라는 작업을 수행한다. 스프레드시트를 상상해보자, 칼럼들은 동영상들이고 row들은 다양한 사용자들이다.
    각 셀(cell)들은 각 사용자가 각 동영상을 얼마나 좋아하는지를 나타낸다.
    그러나 대부분의 셀은 비어있다.
    추천의 목표는 모든 빈 셀에 대해 예측(prediction)을 하는 것이다.
  4. 딥러닝 추천 모델(DLRM)이 이를 수행하는 한 가지 방법은 그리드를 2개의 행렬(grid)로 나누는 것이다.
    하나는 사용자에 대한 데이터를 포함하는 행렬(grid)과 다른 하나는 동영상에 대한 데이터를 포함하는 행렬(grid)로 나누는 것이다.(수학 용어로 행렬을 인수분해).
  5. 이러한 행렬(grid)을 재결합(즉, 행렬 곱셈)을 하고
  6. 그 결과를 다른 신경망에 입력으로 제공하여 추가적인 수치 계산을 수행하면 비어 있던 셀을 채울 수 있다.
    즉, 각 사용자가 각 동영상을 얼마나 좋아할지 예측할 수 있다.

비슷한 방식은 광고, 스트리밍 서비스의 노래, 이커머스 플랫폼의 제품 등에도 적용할 수 있다.
기술 기업들은 이와 같이 상업적으로 유용한 작업을 잘 수행하는 모델에 가장 큰 관심을 보입니다. 하지만 이러한 모델을 대규모로 실행하려면 막대한 비용과 방대한 양의 데이터, 엄청난 처리 능력(processing power)이 필요합니다.

학술적 맥락에서는, 데이터셋이 작고 예산이 제한적이기 때문에 다른 종류의 모델이 더 실용적입니다.
이러한 모델에는 순환 신경망(데이터의 시퀀스를 분석하기 위해 사용됨), 변이형 오토인코더(variational autoencoders, VAE)(데이터에서 패턴을 발견하기 위해 사용됨), 생성형 적대 신경망(generative adversarial networks, GAN)(하나의 모델이 다른 모델을 반복적으로 속이면서 작업을 배우는 방식), 그래프 신경망(복잡한 상호작용의 결과를 예측하기 위해 사용됨)이 포함된다.

심층 신경망, 트랜스포머, 확산 모델이 모두 연구적 호기심에서 광범위한 배포로 발전한 것처럼, 이러한 다른 모델의 특징과 원리는 미래의 AI 모델에 활용되고 통합될 것이다. 트랜스포머는 매우 효율적이지만, 이를 확장한다고 해서 환각과 추론 시 논리적 오류를 범하는 경향을 해결할 수 있는지는 확실하지 않다. 이러한 약점을 극복하고 다음 단계로 나아갈 수 있는 “상태 공간 모델(state-space models)”부터 “신경-상징적(neuro-symbolic)” AI에 이르는 ‘포스트 트랜스포머’ 아키텍처에 대한 탐색이 이미 진행 중이다. 이상적으로는 이러한 아키텍처가 더 뛰어난 추론 능력을 겸비한 주의(attention)을 갖는 것이 이상적이다. 현재로서는 그런 모델을 어떻게 구축할지 아는 사람은 없습니다. 언젠가는 AI 모델이 이 작업을 해낼 수도 있을 것이다.

[컴] svg, geojson 이용한 한국지도 그리기

 

벡터 지도 / 웹에서 지도 그리기 / d3 / mapping shape files/ cartography

svg, geojson 이용한 한국지도 그리기

Shpefile 또는 GeoJSON 등의 파일을 얻었으면, mapshaper 에서 이것이 어떻게 그려지는지를 확인해 볼 수 있다.

GeoJSON 을 가지고 D3 로 그리기

npm install -g d3-geo-projection

windows 에선 " 를 사용하지만, bash 에서는 '를 사용하면 된다.

rotate 는 반시계방향이다. conic projection 이어서 rotate 가 정확히 평면에서 rotate 하는 것과는 조금 다르다. 원추도법(Conic projection) 에 대한 설명은 wiki page](https://ko.wikipedia.org/wiki/%EC%A7%80%EB%8F%84_%ED%88%AC%EC%98%81%EB%B2%95#%EC%9B%90%EC%B6%94%EB%8F%84%EB%B2%95)를 참고하자.

  • https://youtu.be/5QWtpksj9_U?t=315 의 그림참고
  • parallels 는 표준위선이다. 이 표준위선내에서는 축척이 일정하다고 볼 수 있다. 원뿔모양이라서 표준위선 밖은 위로갈수록 축척이 커지고, 아래로 갈수록 축척이 작아진다.
.\node_modules\.bin\geoproject.cmd "d3.geoConicEqualArea().parallels([33, 38.7]).rotate([230, 0]).fitSize([960, 960], d)" < south-korea-with-regions_1516.geojson > korea-map.json

.\node_modules\.bin\geo2svg.cmd -w 960 -h 960 < korea-map.json > korea-map.svg

korea-map.svg 를 열어보면 된다.

Reference

  1. Command-Line Cartography, Part 1. A tour of d3-geo’s new command-line… | by Mike Bostock | Medium

[컴] nestjs 에서 graphql 사용

graphql / code first

nestjs 에서 graphql 사용

  1. npm i @nestjs/graphql @nestjs/apollo @apollo/server graphql
  2. nest generate module brand
  3. nest generate resolver brand
  4. nest generate service brand
  5. src/app.module.ts 에 GraphQL module 설정 (아래 ‘codes’ 참고)
  6. /src/brand/brand.type.ts 생성 (아래 ‘codes’ 참고)
  7. /src/brand/brand.service.ts (아래 ‘codes’ 참고)
  8. /src/brand/brand.resolver.ts (아래 ‘codes’ 참고)
  9. npm run start
  10. browser에서 localhost:3000/graphql

codes

// app.modules.ts
import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { GraphQLModule } from '@nestjs/graphql';
import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo';
import { BrandModule } from './brand/brand.module';
import { join } from 'path';

@Module({
  imports: [
    BrandModule,
    // graphql module 설정
    GraphQLModule.forRoot<ApolloDriverConfig>({
      autoSchemaFile: join(process.cwd(), 'src/schema.gql'),
      driver: ApolloDriver,
      playground: true,
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}
// /src/brand/brand.type.ts
import { Field, ObjectType, Int } from '@nestjs/graphql';

@ObjectType()
export class Brand {
  @Field(type => Int)
  id: number;

  @Field()
  name: string;

  @Field()
  company: string;
}
// /src/brand/brand.service.ts
import { Injectable } from '@nestjs/common';
import { Brand } from './brand.type';

@Injectable()
export class BrandService {
  private brands: Brand[] = [
    { id: 1, name: 'Air Force', company: 'nike' },
    { id: 2, name: 'Jordan', company: 'nike' },
  ];

  findAll(): Brand[] {
    return this.brands;
  }

  findOne(id: number): Brand {
    return this.brands.find(brand => brand.id === id);
  }
}
// /src/brand/brand.resolver.ts
import { Args, Int, Query, Resolver } from '@nestjs/graphql';
import { Brand } from './brand.type';
import { BrandService } from './brand.service';

@Resolver(of => Brand)
export class BrandResolver {
  constructor(private brandService: BrandService) { }

  @Query(returns => [Brand])
  brands(): Brand[] {
    return this.brandService.findAll();
  }

  @Query(returns => Brand)
  brand(@Args('id', { type: () => Int }) id: number): Brand {
    return this.brandService.findOne(id);
  }
}

graphQL query

brand.resolver.ts 에 정의한 method 를 이용하게 된다. 아래처럼 brands를 query하면 brand.resolver.tsbrands 가 호출된다.

{
  brands{
    id, name, company
  }
}
{
  "data": {
    "brands": [
      {
        "id": 1,
        "name": "John Doe",
        "company": "john.doe@example.com"
      },
      {
        "id": 2,
        "name": "Jane Doe",
        "company": "jane.doe@example.com"
      }
    ]
  }
}

See Also

  1. GraphQL vs. REST | Apollo GraphQL Blog
    • Rest 의 아이디어는 resource 다. resource type, 에 따라 fetch way 가 다르다.
    • GraphQL 은 2개를 따로 정의한다. rdbms의 모습과 비슷하다.
      • data 에 대한 schema 를 정의하고,
      • query 를 위한 schema 를 따로 만들 수 있다.
  2. Getting Started with NestJS GraphQL Schema First Approach

Reference

  1. GraphQL + TypeScript | NestJS - A progressive Node.js framework
  2. Beginner’s Guide to Using GraphQL with NestJS

[컴] 자막번역

srt / smi / 자막번역 / 무료번역 / srt 번역

자막번역

deepl 을 사용해서 자막을 번역해준다.

DeeplTranslator 은 우리가 web 에서 사용하는 무료 버전을 사용해서 번역해준다. 코드를 확인해 볼 만 하다.

See Also

  1. 쿠…sal: [컴] ffmpeg 으로 video container 변경

[컴] Remix 의 Hello World

 

Remix 의 Hello World

Helloworld

  1. npm init -y
  2. npm i @remix-run/node @remix-run/react @remix-run/serve isbot@4 react react-dom
  3. npm i -D @remix-run/dev vite
  4. vite.config.js 생성
// from : https://remix.run/docs/en/main/start/quickstart#vite-config
import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [remix()],
});
  1. app/root.jsx생성
  2. npx remix vite:build : <proj_root>\build에 client, server 가 만들어짐.
  3. npx remix-serve build/server/index.js : package.jsontype: module 이 필요.

package.json

{
  "name": "skybridge",
  "version": "1.0.0",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "build": "remix vite:build",
    "serve": "remix-serve build/server/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "@remix-run/node": "^2.9.2",
    "@remix-run/react": "^2.9.2",
    "@remix-run/serve": "^2.9.2",
    "isbot": "^4.4.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@remix-run/dev": "^2.9.2",
    "vite": "^5.3.1"
  }
} 

모든 route 은 links function 을 export 할 수 있다.

다음과 같은 것으로 보면 된다. <link rel="stylesheet" href="./app.css?url">

import type { LinksFunction } from "@remix-run/node";

import appStylesHref from "./app.css?url";
export const links: LinksFunction = () => [
  { rel: "stylesheet", href: appStylesHref },
];

route 추가

만약 다음과 같은 file 을 만든다면, 브라우저에서 /contacts/<id> 로 갈 때 contact.$contactId.tsx 파일을 호출할 것이다.

  • /app/routes/contact.$contactId.tsx

templates, stacks

templates, stacks 를 이용하면 쉽게 초기 세팅을 끝낼 수 있다.

template 사용

quick start 에서 처럼 한번 해본 이후엔 그냥 template을 쓰면 된다.

npx create-remix@latest <my_app_name> –template remix-run/remix/templates/remix

entry.{client|server}.tsx

이 파일은 optional 이다. 이 파일이 있다면, 먼저 browser 는 entry.client.tsx를 호출하고, 그 후 /app/routes/_index.tsx를 실행한다.

Layout

root.tsxLayout function 이 있으면 그것이 기본적인 Layout 으로 사용된다.

_index.tsx

보통 아래처럼 default function 을 지정하는데, Index 는 다른 이름으로 바꿔도 문제되지 않는다.

...
export default function Index() {
    return (
        <div></div>
    )
}

접근 순서

  1. entry.client.tsx
  2. app/root.tsxLayout
  3. app/root.tsxApp
  4. app/routes/_index.tsx

See Also

  1. Query GraphQL in Remix in less than 60 seconds | simeonGriggs.dev : graphql 사용

[컴] ionic 으로 android apk 생성

cross platform / cordova

ionic 으로 android apk 생성

ionic start

  • Examples
  • ionic start --list : template list 를 볼 수 있다.
  • ionic start myApp tabs --type=react : myApp 이란 이름으로, tabs 라는 template을 사용해서 project생성
npm install -g @ionic/cli

ionic start --list
ionic start myApp tabs --type=react 

ionic capacitor

ionic 은 기본적으로 Capacitor 를 사용한다.(Capacitor: Everything You've Ever Wanted to Know - Ionic Blog)

  • ionic serve : browser에서 app 을 보여준다.
  • ionic capacitor add android : Capacitor 를 이용해서 android app 추가
  • ionic capacitor build android : ionic capacitor build | Ionic Documentation
  • ionic capacitor open android : android project를 android studio 에서 열어준다.

emulator

emulator 를 띄워놓고, ionic capacitor run android --target=Pixel_3a_API_34 를 하면, emulator 에 apk 가 설치되고 실행된다.

  1. 환경변수 설정

    • JAVA_HOME은 android build 시점에 필요하다.
    set JAVA_HOME=d:\a\apps\java\jdk-17.0.11.9-hotspot
    set ANDROID_HOME=d:\a\appss\Android\Sdk
  2. emulator list : \Android\Sdk\emulator\emulator.exe -list-avd ionic capacitor run android --list 을 사용할 수도 있다. bat ionic capacitor run android --list

  3. run emulator: \Android\Sdk\emulator\emulator.exe -avd Pixel_3a_API_34

  4. ionic capacitor run android --traget=<target>

build .apk

ionic capacitor open android 를 실행하면, <proj_root>\android 를 android studio 에서 열어준다. android studio 에서 ‘build apk’ 를 하면 apk 를 얻을 수 있다.

  • apk path: <proj_root>\android\app\build\outputs\apk\debug\app-debug.apk

See Also

  1. 쿠…sal: [컴] cordova 로 android app build
  2. Starting an App: How to Guide | Ionic Documentation

[컴] cordova 로 android app build

 apache cordova / cross platform /

cordova 로 android app build

절차

  1. npm 설치
  2. npm i --save cordova
  3. cordova create mytestapp com.mysite.myapp MyTestApp --template https://github.com/apache/cordova-app-hello-world
  4. cd mytestapp
  5. cordova platform ls
  6. cordova platform add android
  7. cordova build android

cordova create

  • cordova create <path> <id> <name>
  • template 사용:
    • App Templates - Apache Cordova
    • cordova-template-ngx-onsenui
    • 예 : cordova.cmd create mytestapp com.mysite.myapp MyTestApp --template cordova-template-ngx-onsenui

cordova build

prerequisites

  • gradle : Gradle | Releases
  • java 17 이상
  • android sdk : android studio 설치후, sdk manager 로 download 하면 된다.

cordova build android

set PATH=d:\a\apps\gradle\gradle-7.5.1\bin;%path%
set JAVA_HOME=d:\a\apps\java\jdk-17.0.11.9-hotspot
set ANDROID_HOME=d:\a\appss\Android\Sdk
d:\a\prog\cordova\node_modules\.bin\cordova.cmd build android

Error, Could not get resource

테스트를 한 환경의 wifi 가 stable 하지 않았는데, 그래서 다음처럼 간혹 Could not get resource 에러가 떴다. 이럴 때는 그냥 다시 build 를 시도하면 된다. 그러면, download 가 잘 이뤄져서 이 이슈는 넘어간다. 이런 식으로 Could not get resource 가 뜨는 경우는 계속 재시도 하면 된다.

* What went wrong:
Execution failed for task ':CordovaLib:compileDebugJavaWithJavac'.
> Could not resolve all files for configuration ':CordovaLib:debugCompileClasspath'.
   > Failed to transform kotlin-stdlib-1.7.10.jar (org.jetbrains.kotlin:kotlin-stdlib:1.7.10) to match attributes {artifactType=android-classes-jar, org.gradle.category=library, org.gradle.libraryelements=jar, org.gradle.status=release, org.gradle.usage=java-api}.
      > Could not download kotlin-stdlib-1.7.10.jar (org.jetbrains.kotlin:kotlin-stdlib:1.7.10)
         > Could not get resource 'https://repo.maven.apache.org/maven2/org/jetbrains/kotlin/kotlin-stdlib/1.7.10/kotlin-stdlib-1.7.10.jar'.
            > Tag mismatch

.apk

다음 path 에서 결과물을 확인할 수 있다.

  • <proj_root>\platforms\android\app\build\outputs\apk\debug\app-debug.apk

emulator

Android Virtual Device(AVD) 에서 cordova 로 만든 apk 를 실행할 수 있다.

일단 먼저 AVD 를 띄워놓고, cordova run --emulator 를 실행하면 된다.

avd 실행

android studio 에 가서 avd manager 에서 띄워도 되고, emulator 실행파일을 이용해서 띄워도 된다.

Reference

  1. Android Platform Guide - Apache Cordova
  2. 쿠…sal: [컴] cordova 로 web app 만들기
  3. Apache Cordova