미연시 대화창 v3 (js 버전)https://arca.live/b/characterai/106704461

개쩌는게 올라왔는데 챗붕이들 어캐 쓰는건지 몰라서 묻힌 것 같아 안타깝다. 저게 뭐냐면




이런거다. 


원숭이(나)도 쓸 수 있게 가이드 해줄테니, 보고 답답하면 인간답게 개량판을 내놓아라.


1. 배경 준비하기

여기서 부터 포기하는 놈들 많을텐데 핀터레스트에 background ilustration 만 검색해도 이런식으로 잘만 나온다.



이 때 단순한 몇가지 조건이 있는데


1. 몰입감을 위해선 '배경만' 있는 편이 좋다.

2. 좌우로 넓게 트여있는 편이 좋다. 


그냥 간단하게 미연시 배경 일러스트로 적당할만한거 찾아.


배경 에셋을 장소로써 준비하면 그에 따라서 이동할 때 마다 뒤에 이미지도 바뀌게 할 수 있지만

'맛보기' 를 위해서 배경 그림 셋트 준비해오라고 하면 원숭이들 다 도망갈거 안다. 느낌있는거 한장만 집어라.

사이즈는 400 x 300 이 무난한 것 같다.


이마저도 귀찮은 원숭이 새끼를 위해 내가 제시해봄.



ㅇㅇ


2. 캐릭터 JS + 백그라운드 임베딩 입력


고급설정 가서 '비권장 설정 보이기' 체크




그럼 캐릭의 스크립트 창 맨 아래에 캐릭터 JS가 뜬다.

character js

//@use editDisplay


function simpleHash(inputString) {

    let hash = 0;

    for (let i = 0; i < inputString.length; i++) {

        const char = inputString.charCodeAt(i);

        hash = (hash << 5) - hash + char;

        hash = hash & hash;

    }

    return hash;

}


async function editDisplay(text) {

    const pattern = /\[(.+?):\s*(.+?)\s*\|\s*(.+?):\s*(.+?)\s*\|\s*(.+?):\s*(.+?)\s*\]/;

    const matches = text.match(pattern);

    let Hash=0;


    if (matches && matches[6]) {

        Hash = simpleHash(matches[6]);

    } else return text;



    return editDisplay(text.replace(pattern,

        `<!DOCTYPE html>

<html>

<head>

  <style>


    #toggleCheckbox${Hash} {

      display: none;

    }


    #toggleCheckbox${Hash}:checked ~ .text-box {

      display: none;

    }

    .toggle-label {

      position: absolute;

      top: 22px;

      right: 10px;

      z-index: 4;

      cursor: pointer;

      width: 50px;

      height: 50px;

      background-image: url('{{raw::hide}}');

      background-size: contain;

      background-repeat: no-repeat;

      background-position: center;

    }

  </style>

</head>

<body>

  <div class="image-stack">

    <img src="{{raw::$2}}" alt="Background" class="back">

    <img src="{{raw::$4}}" alt="Character" class="front">

    <input type="checkbox" id="toggleCheckbox${Hash}">

    <label for="toggleCheckbox${Hash}" class="toggle-label"></label>

    <div class="text-box">

<div class="name"><char></div>

      <div class="scrollable-content">

          $6

       </div>

      </div>

    </div>

  <br><br>

</body>

</html>`

    ));

}


복붙. 내가 사이즈 좀 조정한건데 마음에 안들면 맨 위에 제작자 챈럼걸로 복붙하던가 해.



그 다음엔 백그라운드 임베딩

진짜 뉴비도 알 수 있게 설명해주기 위해서 말하자면, 캐릭터 고급 설정칸 맨 아래 있다.



백그라운드 임베딩

<head>

<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;700&display=swap" rel="stylesheet">

<style>

    .image-stack {

       position: relative;

       width: 80vw;

       max-width: 580px;

       aspect-ratio: 3 / 2;

       margin: 0 auto;

    }

    .image-stack img {

      position: absolute;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

      border-radius: 15px;

      border: 3px solid #ccc;

    }

    .image-stack .front {

      z-index: 2;

      width: auto;

      height: 100%;

      left: 50%;

      transform: translateX(-50%);

      border: none;

    }

    .image-stack .back {

      z-index: 1;

    }

    .text-box {

      font-family: 'Quicksand', sans-serif;

      box-sizing: border-box;

      background-image: url('{{raw::textbox}}');

      background-size: cover;

      background-repeat: no-repeat;

      border: none;

      width: 80vw; /* Set width to fit screen */

      max-width: 500px;

      aspect-ratio: 3 / 1;

      text-align: left;

      color: black;

      padding: clamp(0px, 15vw, 70px) 5% clamp(0px, 10vw, 40px) 5%; /* Adjust padding */

      font-size: clamp(0px, 1em, 14px);

      position: relative;

      top: clamp(0px, 35vw, 245px); /* Move it down */

      z-index: 3;

      overflow: hidden;

      margin: 0 auto;

    }

    .scrollable-content {

      font-family: 'Quicksand', sans-serif;

      position: absolute;

      top: clamp(0px, 11.6vw, 80px); /* Adjust top */

      left: clamp(0px, 6.5vw, 40px); /* Adjust left */

      right: clamp(0px, 5.8vw, 34px); /* Adjust right */

      bottom: clamp(0px, 4.3vw, 42px); /* Adjust bottom */

      overflow-y: auto;

      font-size: clamp(0px, 1em, 14px);

    }

    .name {

      font-family: 'Quicksand', sans-serif;

      position: absolute;  

      top: clamp(0px, 5vw, 41px); /* Adjust top */       

      left: clamp(0px, 7vw, 53px); /* Adjust left */

      font-weight: bold;

      color: black;

      font-size: clamp(0px, 1.2em, 17px);

    }

</style>

</head>


복붙. 마찬가지로 맘에 안들면 원글 가서 그거 복붙해.


3. 글노덮 넣기 백그라운드 


글로벌 노트 덮어쓰기

{{original}}


###Dialogue Format

{{char}}'s dialogue must always be displayed in the following format.(Insert into all of the character's dialogue)

No other characters (such as <user>) will be displayed in this format.


Form:

[Location: <current location> | Emotion & behavior : <emotion & behavior> | Dialogue: <dialogue>]

Example:

[Location: library | Character: Kana | Emotion & behavior :neutral | Dialogue: Oh, you're interested in these too?]


- in 'Dialogue' are only character's dialogue, not narrations or behaviors.

- Apply to all lines, and only output lines that fit the format.


The ID starts at 1 and is incremented by 1 each time the dialogue is printed once. Refer to the previous output.


Locations must be chose from the following list of locations.

List of locations:

- defualt


Emotion & behavior must be chosen from the following list of Emotion & behavior.

List of Emotion & behavior: 

- neutral


빨간색에는 배경으로 나오게 할 에셋 이미지 이름의 목록

파란색에는 캐릭터의 감정으로 나오게 할 에셋 이미지 이름의 목록을 작성해라.


잘 모르겠 원숭이라서 맛만 보고 싶으면 그냥 복붙



3. 에셋 넣기


필수 에셋


이름을 hide로 변경


이름을 textbox로 변경


저 원글에 나와있는대로, 저렇게 두개 넣으면 되는데.

Hide 의 경우 채팅창을 안보이게 해서 캐릭터 일러를 띄우는 기능이지만, 현재 오토마크랑 호환이 안된다.


일단 넣어둬.  또한 위에서 언급한 대. 배경 에셋 / 감정 에셋(누끼) 을 넣는다.

예시를 위해 여기선 실험용으로 내 캐릭터 짤을 하나 쓰겠다.





4. 테스트


여기까지 세팅을 마치면?



이렇게 된다.



원문은 이런 식.


원리는


1. 글노덮에 대화 지시 명령으로 인해 캐릭터의 대사를 저런 양식으로 출력 시킨다.

2. 양식을 감지해서 위치에 해당하는 이미지와 감정에 해당하는 이미지가 뜨도록 정규식 치환을 시킨다.


이런 느낌인 것 같다(아마도). 그래서 위치를 여러개 넣으면 변환되고, 감정도 여러개 넣으면 번환되고.

그게 아니더라도 저 맛보기 세팅만으로도 소설적인 묘사 말고 AI 채팅 대화 느낌을 즐기고 싶은 사람에겐 유용하지 않을까.