generative x

생성 -X

Generative-X (Twitter)는 이미지 필터, 텍스트 음성 연설, 자동 답글 및 동적 UI 구성 요소를 사용하여 AI를 사용하여 트위터 타임 라인을 늘리기 위해 팝업에 더 많은 컨텍스트를 제공합니다!

SPCXOPENAI HACKATHON 동안 제작되었습니다

데모 비디오

x에서 비디오를 시청하십시오

시작하기

후드 아래에는 NextJS 애플리케이션과 크롬 확장 기능이 있으며 피드에서 트윗을 당기고 다음 JS 앱을 iframe로 X로 주입합니다.

Nextjs 앱을 실행하여 시작하겠습니다. Which는 샘플 트위터 피드를 사용합니다.

1. OpenAi_api_key 및 elevenlabs_api_key (tts에 사용) 추가하십시오.
   cp .env.local.example .env.local
2. 응용 프로그램을 실행하십시오
   npm run dev
3. 이미지 필터를 사용해보십시오 (캐시 된 것처럼 삐걱 거릴 것입니다)
4. 동적 UI 스위치를 사용해보십시오

크롬 확장

사용하려면 확장자를 브라우저에로드해야합니다.

설치

1. 이 repo 다운로드 - 확장자는 chrome_extensions/src 폴더에 있습니다 (이 파일이있는 곳)
2. Chrome> 확장으로 이동하십시오
3. 개발자 모드 활성화 (오른쪽 스위치)
4. "포장되지 않은로드"를 클릭 하고이 파일의 동일한 수준에서 src 폴더를 선택하십시오.

용법

1. https://twitter.com으로 찾아보십시오
2. 도구 모음에서 확장자 아이콘을 클릭하십시오 (현재 하트 모양)
3. 메뉴에서 "X 타임 라인"을 선택하십시오

동적 사용자 인터페이스

현재 트윗 컨텍스트를 기반으로 렌더링 할 수있는 5 개의 동적 구성 요소가 있습니다. 렌더링 할 구성 요소를 결정하기 위해 기능 호출 기능이있는 GPT3.5를 사용합니다.

동적 사용자 인터페이스 (DUI)는 /app/components/dui 에서 찾을 수 있습니다

1. weather.tsx
   위치와 "날씨"가 트윗에 언급 된 경우 라이브 날씨 데이터를 렌더링합니다.

2. stocks.tsx
   시세 기호 IE $ TSLA가 트윗에 언급 된 경우 라이브 재고 데이터를 렌더링합니다.

3. poltics.tsx 트윗이 폴로치 인 경우 (당연한 소나에서 생성 된) refeference 링크 (Perplexity Sonar에서 생성)로 정치적 규모를 렌더링합니다.

4. clothing.tsx
   이 구성 요소는 의류 품목을 트윗 이미지의 Nordstrom Rack 카탈로그의 항목과 일치 시키려고합니다. 데모의 경우 @TechBrodRip 아래에서 트윗 만 렌더링합니다.

5. Reply.tsx
   응답 구성 요소에서 TTS와 함께 제안 된 몇 가지 답글을 렌더링합니다. 이것은 기본 구성 요소입니다. 다른 구성 요소가 렌더링되지 않습니다.

새로운 구성 요소 추가

이 응용 프로그램은 더 많은 구성 요소를 사용하면 더 좋아집니다. X 경험을 증대시킬 수있는 구성 요소에 대한 아이디어가 있으면 PR을여십시오.

새로운 구성 요소 추가에 대한 문서가 곧 출시됩니다.

TODO

• actions/tsx 에서 라우터를 호출하는 기능 이동 및 자체 API (현재 서버 작업 호출이 프로덕션에서 병렬화되지 않는 문제가 있습니다. Vercel/Next.js#50743 참조)