반응형

 

배울 점이 많은 강의가 있어서 추천드리며, 시리즈로 글을 쓰고자 합니다.

 

비정형 데이터 분석 2/11 Word2Vec

 

youtu.be/G8UFjFlVVQQ

 

설명 구조

 

 

~식과 같고 이 식을 최대화하려면 분자는 키우고 분모는 줄여야합니다.

~값을 높인다는 것은 무엇일까요?

~의 의미에 대해 잠깐 살펴보겠습니다.

~은 한자~이며 ~입니다.

~의 정의는 ~과 같습니다.

~에 비유할 수 있습니다.

~의 

 


 

수식 입력 관련

blog.naver.com/alwaysneoi/220698343806

 

키워드 및 핵심 내용

 

Word2Vec/ skip-gram 모델 중심

 

- skip-gram 학습 방법

 

학습 목표는 중심단어(c)가 주어졌을 때, 주변단어(o)가 나타날 확률 최대화하는 것입니다.

그 확률은 아래 식과 같고 이 식을 최대화하려면 우변의 분자는 키우고 분모는 줄여야 합니다.

분자를 키우다는 것은 중심단어 벡터 v 와 주변단어 벡터 u의 내적 값을 높인다는 것입니다.

우선 내적의 정의는 아래 식과 같습니다.

주변단어가 중심단어에 더 가깝게 리프리젠테이션되면 그 내적 값은 더 크게 됩니다.

중심단어와 주변단어의 연관성을 높여야 합니다.

 

분모는 줄일수록 좋습니다.

윈도우 내에 등장하지 않는 단어를 포함한 전체 단어와 중심단어의 유사도를 감소시킨다는 정도로

이해하시면 될 것 같습니다.

 

word2vec 의 학습법은 경사상승법으로 업데이트를 수행합니다.

조금씩 이동하면서 가야할 방향을 결정해야 합니다.

가야할 방향과 보폭은 다음 식과 같습니다.

이 식이 만들어진 과정을 살펴보겠습니다.

 

방향을 결정한다는 것은 해당 지점에서의 기울기를 구하는 것을 의미합니다.

 

eda-ai-lab.tistory.com/122

 

- skip-gram 학습 트릭

 

1.다빈도 단어의 표본추출

- 자주 등장하는 단어를 샘플링에서 제외 -> 학습 부하 감소

- 제외 확률

 

2.윈도우 밖 단어의 표본추출

- negative sample : 윈도우(중심단어, 주변단어) 밖에서 5~20개 단어를 확률적으로 추출

- negative sample에 뽑힐 확률

- 3/4(0.75)승하여 많은 샘플은 확률을 약간 줄이고 적은 샘플은 확률을 약간 높임

 


 

[word2vec 추가 설명]

ratsgo.github.io/from%20frequency%20to%20semantics/2017/03/30/word2vec/

 

Word2Vec의 학습 방식 · ratsgo's blog

이번 포스팅에서는 최근 인기를 끌고 있는 단어 임베딩(embedding) 방법론인 Word2Vec에 대해 살펴보고자 합니다. Word2Vec은 말 그대로 단어를 벡터로 바꿔주는 알고리즘입니다. Neural Network Language Model(

ratsgo.github.io

 


[이은아님 강의 모음]

www.youtube.com/playlist?list=PLGAnpwASolI0vViZItiP90nWI_s9m91Av

 

이은아님 머신러닝 자연어처리 - YouTube

 

www.youtube.com


 


 

 

반응형
반응형

 

현재 자체 component로 구현이 안 된 목록 드래그 위치 변경 기능을 webviewer의 javascript 실행 기능을 활용하여 구현한 것입니다.

 

- webviewer를 통해 javascript를 실행하실 수 있습니다.

- 간단한 로컬DB 사용법을 알 수 있습니다.

 


 

앱 구상

[참고 앱]

http://puravidaapps.com/sortable.php

App Inventor Tutorials and Examples: Sortable | Pura Vida Apps

A Sortable List using Drag-and-Drop with App Inventor and jQuery UI The example displays an App Inventor list in a jQuery UI Sortable . Thank you furf , together with your jQuery UI Touch Punch library we can use drag and drop on the mobile device to order the list items manually. 

 

기본기능

1. 드래그로 목록 순서를 변경

2. 목록 순서를 휴대폰에 저장

 


앱 제작

 

1. 화면 디자인

 

- 필요한 파일들을 올려주세요.

jquery-ui.css

ui-lightness-jquery-ui.css

ui-icons_ef8c08_256x240.png

jquery-1.7.2.min.js

jquery-ui.min.js

jquery.ui.touch-punch.min.js

 

 

2. 블록 코딩

 

- WebViewer에 띄울 html file을 셋팅하는 루틴

- 로컬 DB를 읽어오기, 자료가 없으면 목록을 초기값으로 설정

 

 

- 순서바꾸기를 터치하면 webviewer를 띄우고 html에 전달할 목록을 셋팅 후 web page javascript 실행

 

 

- 저장버튼을 터치하면 webviewer를 감추면서 webviewer의 CurrentPageTitle을 통해 결과값 가져오고 로컬DB에 저장

 

 

3. 실행 화면

 

 

4. 소스 파일(aia)

sortable_20200704.aia
0.11MB

 


 

관련글 : 앱인벤터 소개

https://blog.naver.com/sfex/221994450104

 

 


 

 

 

반응형
반응형

 

[출처] http://www.aitimes.com/news/articleView.html?idxno=129355

 

인공지능이 타협도 한다고?...딥마인드, 승부 넘어 윈윈하는 AI 교육 - AI타임스

딥마인드가 인공지능(AI)에게 협력과 타협을 교육시켜 여러 이익관계자들의 선호사항을 최대한 반영한 결과를 도출시키고 있다.

www.aitimes.com

 

벤처비트(https://venturebeat.com)는 10일(현지시각) 구글 알파벳 자회사인 딥마인드가 ‘디플로머시(Diplomacy)’라는 보드게임으로 AI를 훈련시킴으로써 승패가 갈리는 기존 게임에서 벗어나 AI가 한 단계 더 나아간 타협과 협력을 학습하도록 하고 있다며 이를 소개했다.

 

[영어 기사] https://venturebeat.com/2020/06/10/deepmind-hopes-to-teach-ai-to-cooperate-by-playing-diplomacy/

딥마인드가 AI로 하여금 공동이익 추론에 기반한 조정·협력·타협이라는 윈윈 방식을 도출하도록 학습시키기 위해 만든 ‘디플로머시’ 보드게임. 이를 바탕으로 훈련된 AI는 계약 협상·도시계획·물류 교통 등에 활용될 수 있을 것으로 기대를 모은다. (사진=딥마인드)

 

 

타협과 협상을 학습시키기 위한 AI 교육용 게임 ‘디플로머시(Diplomacy)’는 윈윈을 꾀하도록 고안된 말 그대로 ‘외교’ 게임인 셈이다.   

 

이들은 프리프린트 서버인 아카이브(Arxiv.org)에 게재된 논문에서 ‘디플로머시(Diplomacy)’ 게임 결과 ‘지속적인 개선’을 보이며 높은 점수를 얻은 AI 시스템에 대해 설명했다.

 

딥마인드의 기존 AI 시스템은 헥스(Hex) 게임, 장기, 포커와 같은 대규모의 복잡한 게임에서 강력하고 경쟁력 있는 플레이를 했지만 이 중 대부분은 다른 플레이어의 패배해야 승리할 수 있는 2인용 제로섬 게임이다.

 

그러나 안타깝게도 이러한 빼어난 성과를 보여주는 AI이지만 모든 것이 제로섬 게임이 아닌 인간의 현실 세계에 적용하기엔 부족한 점이 있다.

 

예를 들면 혼잡한 도로를 둘러싼 교통 노선 계획, 계약 협상, 그리고 고객과의 상호 작용과 같은 업무들을 처리하는 일은 제로섬 게임이 될 수 없다. 이 문제들을 해결하기 위해서는 모든 관련 당사자들의 선호가 어떻게 일치하고 충돌하는지에 대한 타협과 고려를 포함시킬 수밖에 없다.

 

AI 소프트웨어 에이전트들이 이기적일 때에도 조정과 협력을 통해 공동의 이익을 얻을 수 있기 때문에 다양한 그룹 간 상호 작용은 타인의 목표와 동기 부여에 대한 복잡한 추론을 필요로 한다. (에이전트는 최대한의 보상을 얻기 위해 시행착오를 거치며 여러 번의 반복으로 가장 효율적인 길을 스스로 탐색하는 시스템을 말한다.)

 

이를 훈련시키기 위해 고안된 딥마인드의 ‘디플로머시(Diplomacy)’ 게임은 7명의 플레이어가 유럽의 주(Province) 단위 지도 상에서 여러 단위부대(유닛)들을 제어토록 함으로써 AI가 이러한 상호작용을 하도록 한다.

 

디플로머시 게임에서 ‘주’는 보급센터다. ‘유닛’들은 주를 점령함으로써 보급센터를 확보한다. 보급 센터를 더 많이 소유한 플레이어는 더 많은 유닛을 만들 수 있고, 보급센터 대부분을 소유하는 플레이어가 게임에서 승리한다.

 

매 게임마다 모든 플레이어들은 자신의 모든 부대를 동시에 34개 지역 중 한 곳으로 이동시켜야 하며, 하나의 유닛은 같은 플레이어나 다른 플레이어 소유의 다른 유닛을 지원함으로써 또 다른 유닛의 저항을 극복하게 만들 수 있다. (대체로, 힘이 같은 유닛은 한 지방을 지탱하거나 인접한 공간으로 이동할 수 있다.)

 

유닛 간의 상호 의존성 때문에 플레이어들은 자신의 유닛 움직임에 대해 다른 플레이어들과 협상해야 한다. 그들은 다른 선수들의 움직임과 그들의 움직임을 조정함으로써 이익을 얻기 위해 대기하며, 다른 선수들이 어떻게 행동할지 예측하고 그들의 행동에 이러한 예상을 반영해야 한다.

 

저자들은 “우리는속임수 행동의 등장과 발견을 연구하고...실제 세상에서 어떻게 그러한 행동을 완화시킬 수 있는지알고 있다는 것을 확실히 하기 위해 디플로머시 같은  게임을 사용할 것을 제안한다"라고 썼다. 이들은 “디플로머시에 관한 연구는신뢰와 동맹을 수립하고 유지하는 것을 둘러싸고 발생하는 어려운 문제 해결을 포함하는,타인과 성공적으로 협력할 수 있는 인공 에이전트를 만드는 길을 열어주게 될 것이다“라고 덧붙였다.

 

딥마인드는 어떤 노골적 소통도 허용되지 않는 ‘언론 없는’ 디플로머시 변종에 초점을 맞췄다.

 

이 AI는SBR(Sampled Best Response)라는 접근법으로정책 반복 기법을 사용해 일부 보상을 극대화해 주며 강화 학습 에이전트들을 훈련시켰다. SBR는 가상 플레이는 물론 플레이어 액션에 대한 거의 최고 수준의 반응에 근접하는 정책 반복 기술을 가지고 많은 수의 액션(10⁶⁴)을 보여주는 플레이어들이 디플로머시를 받아들이도록 했다. 

 

딥마인드의 시스템은 이를 반복할 때마다 게임 데이터 세트를 생성하는데, 개선 운영자(improvement operator)로 불리는 모듈이 선택한 동작으로 이전 전략(정책)과 가치 함수를 사용해 이전 정책을 무너뜨리는 정책을 찾아낸다. 그런 다음, 게임 결과뿐만 아니라 개선 운영자가 선택할 행동을 예측하는 정책 및 가치 함수(기능)를 훈련한다.(It then trains the policy and value functions to predict the actions the improvement operator will choose as well as the game results.)

 

앞서의 SBR은 반대자의 정책에 대항해 플레이어 시스템 에이전트의 예상 반응을 극대화해 줄  정책을 알아낸다. SBR는 다수 플레이어의 게임에서 SBR을 사용하도록 맞춤화된 알고리즘 제품군인BRPI(Best Response Policy Iteration)와 결합돼 있다. 이 중 최고급의 것은 최신 BR만 예측하도록 정책을 훈련시키고, 현재의 경험적 전략을 제공하기 위해 역사적 체크포인트를 명시적으로 평균화해 제시한다.

 

딥마인드는 이 시스템의 성능을 평가하기 위해 서로 다른 알고리즘의 6개 에이전트와 참조 코퍼스(말뭉치)에서 독립적으로 추출한 6명의 플레이어 간에 이뤄진 정면 대결 승률을 측정했다. 이 시스템의 승률은 특별히 높지 않았다. 각 게임의 평균 5개의 시드를 기록했는데 12.7~ 32.5%였다. 그러나 딥마인드는 이 시드들이 지도학습으로 훈련된 에이전트들에 비해 크게 향상됐다고 말한다.

 

딥마인드의 시스템에 의해 6개 에이전트가 제어되는 6 대 1의 게임에서 특히 딥넷(Dip Net)이라는 알고리즘에 대한 딥마인드 에이전트들의 승률은 훈련을 통해 꾸준히 향상됐다.

시간에 따른 1 대 6, 또는 6 대 1 디플로머시 게임에서의 딥마인드 시스템의 딥넷 알고리즘에 대한 승률과 기준선 비교. 자료=딥마인드

 

향후 연구에서 연구자들은 에이전트 악용 가능성(exploitability)을 줄이고, 잠재적으로커뮤니케이션을 통해 다른 사람들의 인센티브(동기)에 대해 추론하는 에이전트 구축 방법을 찾아 나설 계획이다.

 

저자들은 이 게임에서 플레이를 향상시키는 것은외교이며 게임의 복잡하게 혼합된동기여러 플레이어의 상황을 조사하기 위한 필수 조건이라고 하며…디플로머시에 적용된 방법은 외교에 대한 직접적 영향을 넘어 비즈니스, 경제, 물류 영역 등에 적용될 수 있다고 한다…

 

디플로머시나 유사한 게임에 사용될 외교 훈련 능력을 갖춘전술적 기본(베이스) 에이전트를 제공함으로써 이 연구결과는-그것이 다른 기계와 함께든 인간과 함께든 간에-동맹을 결성할 능력이 있고 보다 진보된 커뮤니케이션 능력을 이용하는 에이전트 연구를 위한 길을 열었다고 말했다.

 

출처 : AI타임스(http://www.aitimes.com)

 


 

[논문] https://arxiv.org/pdf/2006.04635.pdf

 

This example highlights elements that make Diplomacy unique and challenging. Due to simultaneous move resolution, players must anticipate how others will act and reflect these expectations in their own actions. Players must also use a stochastic policy (mixed strategy), as otherwise opponents could exploit their determinism. Finally, cooperation is essential: Germany would not have been able to prevent France from moving to BUR without Italy’s help.

Diplomacy is specifically designed so that no player can win on their own without help from other players, so players must form alliances to achieve their ultimate goal. In the No-Press variant, this causes pairwise interactions that differ substantially from zero-sum, so difficulties associated with mixed-motive games arise in practice.

Evaluation Methods

- Head-to-head comparision(일대일 비교)

- Winrate Against a Population(인구 대비 승리)

- Policy Transitivity(정책 전이)

- Exploitability(악용 가능성)

 



 

 

반응형
반응형

 

[출처] https://www.teachthought.com/critical-thinking/249-blooms-taxonomy-verbs-for-critical-thinking/

 

사고관련 동사를 세분화하여 다양하게 알고 있으면 더 깊고 다양한 사고에 도움이 되지 않을까?

 

Bloom’s Taxonomy’s verbs('power verbs' or 'thinking verbs')은 강력한 교육 설계 도구입니다.

 

이전보다  차트 형식의 단순성과 깔끔한 ​​디자인은 좀 더 기능적이며 심지어 학생들에게 홀 펀치 및 보관하기에 유용합니다.

 

왼쪽에서 시작하여 대략 오른쪽으로 이동하십시오.

지식: 정의, 식별, 설명, 인식, 말하기, 설명, 암송, 암기, 설명, 견적, 상태, 일치, 인식, 선택, 검사, 찾기, 암송, 열거, 기록, 목록, 인용, 레이블

이해: 요약, 해석, 분류, 비교, 대조, 추론, 관련, 추출, 문구, 인용, 토론, 구별, 설명, 확장, 예측, 표시, 번역, 문의, 연관, 탐색 변환

적용: 해결, 변경, 관련, 완료, 사용, 스케치, 티치, 관절, 발견, 전송,보기, 데모, 참여, 극화, 생산, 보고서, 행동, 응답, 관리, 작동, 준비, 조작

분석: 대비, 연결, 관련, 고안, 상관, 설명, 증류, 결론, 분류, 분해, 문제 해결, 미분, 추론, 결론, 결정, 세분화, 계산, 순서, 적응

평가: 비판, 재구성, 판사, 방어, 평가, 가치, 우선 순위 계획, 등급, 재구성, 수정, 구체화, 등급, 논쟁, 지원, 진화, 결정, 재 설계, 피봇

만들기: 디자인, 수정, 역할 놀이, 개발, 다시 쓰기, 피벗, 수정, 공동 작업, 발명, 쓰기, 공식화, 발명, 상상

 

Knowledge: Define, Identify, Describe, Recognize, Tell, Explain, Recite, Memorize, Illustrate, Quote, State, Match, Recognize, Select, Examine, Locate, Recite, Enumerate, Record, List, Quote, Label

Understand: Summarize, Interpret, Classify, Compare, Contrast, Infer, Relate, Extract, Paraphrase, Cite, Discuss, Distinguish, Delineate, Extend, Predict, Indicate, Translate, Inquire, Associate, Explore Convert

Apply: Solve, Change, Relate, Complete, Use, Sketch, Teach, Articulate, Discover, Transfer, Show, Demonstrate, Involve, Dramatize, Produce, Report, Act, Respond, Administer, Actuate, Prepare, Manipulate

Analyze: Contrast, Connect, Relate, Devise, Correlate, Illustrate, Distill, Conclude, Categorize, Take Apart, Problem-Solve, Differentiate, Deduce, Conclude, Devise, Subdivide, Calculate, Order, Adapt

Evaluate: Criticize, Reframe, Judge, Defend, Appraise, Value, Prioritize Plan, Grade, Reframe, Revise, Refine, Grade, Argue, Support, Evolve, Decide, Re-design, Pivot

Create: Design, Modify, Role-Play, Develop, Rewrite, Pivot, Modify, Collaborate, Invent, Write, Formulate, Invent, Imagine


이전 게시물 

https://www.teachthought.com/critical-thinking/14-brilliant-blooms-taxonomy-posters-for-teachers/


Backward design

https://m.blog.naver.com/kstephul6/221424526981

 

백워드 교육과정 설계 교육학 교육과정 Backward Design wiggins & mctighe

​해당 자료는 운암고등학교 수석교사 허성초 선생님의 논문에서 주 내용을 발췌했습니다.네이버에서 백워...

blog.naver.com

 


어휘력과 사고

[출처] https://m.blog.naver.com/ruiseme/70183449100

 

<심리학개론> 언어와 사고

* 인지 : 모든 형태의 지식을 나타내는 일반적인 용어, 인지 내용과 인지 과정 포함 ① 인지 내용 : 우리가...

blog.naver.com

언어 상대성 가설 : 워프와 사피어

- 언어는 인간의 인지, 즉 사고를 결정한다는 언어 결정론

- 영어 : 11개의 기본 색상용어(검정, 흰색, 빨강, 노랑, 초록, 파랑, 갈색, 보라, 분홍, 주황, 회색)

- 다니족 : 2가지 어휘만 사용(밝고 따뜻한 색을 뜻하는 mola, 어둡고 차가운 색 mili)

- 언어 상대성 가설 -> 다니족의 색 어휘가 두 가지뿐이기 때문에 두 가지 유형의 색상에 대한 사고만이 가능하다는 것, 그러므로 언어가 특정 상황에서 사고에 영향을 미칠 수 있다는 것.

- 만약 언어가 색채의 지각을 결정한다면,

-> 색채에 대한 어휘를 다양하게 가진 사람이 빈약한 언어를 가진 사람에 비해서 색상 지각이 달라야함

- 다니족과 미국인의 색상 재인율 비교 연구 : 다니족과 미국인이 차이가 없었음, 언어 상대성 가설에 반대되는 연구결과

- 명칭을 부여하여 언어가 재인율에 미치는 영향 연구 : 명칭에 따른 시각자극이지각에는 영향을 미치지 않지만, 시각자극의기억에는 영향을 미침,언어 상대성 가설이 타당할 가능성을 제시

 


 


 

 

반응형
반응형

배울 점이 많은 강의가 있어서 추천드리며, 시리즈로 글을 쓰고자 합니다.

비정형 데이터 분석 1/11 신경망언어모델(NNLM)

youtu.be/myG2BhlVyH8

 

설명 구조

- 비교를 통해서 ~이 등장하게 된 히스토리

- 문제점이 있습니다. 한

- ~의 문제점을 극복하기 위해 등장한 것이 ~입니다.

- 이러한 문제를 해결하기 위해 등장한 개념이 ~입니다.

- 개념

- 구조

 


키워드 및 핵심 내용

출현빈도 기반 언어모델(Count-based Language Models) / 통계적 언어 모델(Statistical Language Model, SLM)

- Bag-of-Words

- Chain Rule

- 문제점 : 학습 데이터에 없는 조건(조합)은 확률을 계산할 수 없음

- N-Gram

- Markov Assumption

- 모든 단어가 출현했다는 가정이 아니라 n개만 출현했을 때의 확률과 같다고 봄(이전에 등장한 모든 단어를 고려하는 것이 아니라 일부 단어만 고려)

- 예) bi-grams (두단어)

- 문제점 : 학습 데이터에 나타나지 않는 단어 조합은 확률이 0

- (n을 크게 선택하면 정확하게 예측할 확률은 높아지지만 실제 훈련 코퍼스에서 해당 n-gram을 카운트할 수 있는 확률은 적어지므로 희소 문제는 점점 심각해집니다. 또한 n이 커질수록 모델 사이즈가 커진다는 문제점도 있습니다.)

신경망 기반 언어모델(Neural Network-based Language Models)

- NNLM

- 신경망을 이용한 첫번째 시도

- 카운트 기반 텍스트 변환(one-hot vector / Sparce representation) -> 분산표상(continuous vector / Dense representation)

- 입력 단어의 다음 단어가 출력될 확률이 높도록 신경망 학습

- 신경망 구조 : 입력층, 은닉층, 출력층

- 입력층 : one-hot vector

- 출력층 : Softmax 함수 적용

- NPLM 구조 : 가중치, 바이어스, parameter 차원수 정의

- NPLM 학습 : 확률적 경사상승법(Stochastic gradient ascent)

- Word2Vec

- GloVe

- Fasttext


 

[언어모델 추가 자료]

translate.google.com/translate?hl=en&sl=en&tl=ko&u=https%3A%2F%2Fwikidocs.net%2F21692&anno=2&prev=search

 

언어 모델(Language Model, LM)이란? 언어라는 현상을 모델링하고자 단어 시퀀스(또는 문장)에 확률을 할당(assign)하는 모델입니다.

자연어 처리에서 단어 시퀀스에 확률을 할당하는 일이 왜 필요할까요? 예를 들어보겠습니다. 여기서 대문자 P는 확률을 의미합니다.

a. 기계 번역(Machine Translation):

P(나는 버스를 탔다) > P(나는 버스를 태운다)P(나는 버스를 탔다) > P(나는 버스를 태운다)

: 언어 모델은 두 문장을 비교하여 좌측의 문장의 확률이 더 높다고 판단합니다.

b. 오타 교정(Spell Correction)

선생님이 교실로 부리나케

P(달려갔다) > P(잘려갔다)P(달려갔다) > P(잘려갔다)

: 언어 모델은 두 문장을 비교하여 좌측의 문장의 확률이 더 높다고 판단합니다.

c. 음성 인식(Speech Recognition)

P(나는 메롱을 먹는다) < P(나는 메론을 먹는다)P(나는 메롱을 먹는다) < P(나는 메론을 먹는다)

: 언어 모델은 두 문장을 비교하여 우측의 문장의 확률이 더 높다고 판단합니다.

언어 모델은 위와 같이 확률을 통해 보다 적절한 문장을 판단합니다.

[NPLM 추가 자료]

https://medium.com/@omicro03/%EC%9E%90%EC%97%B0%EC%96%B4%EC%B2%98%EB%A6%AC-nlp-nplm-f7d0f472ce68


 

[이은아님 강의 모음]

www.youtube.com/playlist?list=PLGAnpwASolI0vViZItiP90nWI_s9m91Av

 

이은아님 머신러닝 자연어처리 - YouTube

 

www.youtube.com


 

 

반응형
반응형

휴대폰 화면보다 큰 이미지를 배경으로 드래그 스크롤 하면서 동작하는 앱을 만들 때 사용하면 좋겠습니다.

- 기본 원리는 canvas 위쪽과 왼쪽에 크기 조절용 component (VerticalArrangement, HorizontalArrangement, Image, 등) 을 두고 이것의 크기를 조절하면 canvas 중에서 휴대폰 화면에 보이는 부분이 정해지는 원리입니다.

 


앱 구상

[참고 앱]

https://appinventor.mit.edu/explore/blogs/karen/2018/03.html

Responsive Design: Drag a Canvas larger than screen size

 

기본기능

1. 화면보다 큰 이미지를 canvas 배경으로 설정하고 드래그 스크롤 가능하도록 한다.

2. canvas에 image sprite를 추가하고 드래그하여 움직일 수 있도록 한다.

 


앱 제작

1. 화면 디자인

2. 블록 코딩

- 변수 설정

- canvas 크기를 결정할 배경 이미지 크기

- 처음 휴대폰 화면크기

- 위치 조절용 component의 최대 크기

- 시작하면 init 함수 호출

- canvas 크기와 배경 이미지 설정

- 전체 화면크기는 배경 이미지 * 2

- 보이는 부분을 결정하는 크기 조절용 component (sH, sW) 크기 설정

- 크기 조절용 component (sH, sW) 최대 크기 저장

- canvas를 드래그했을 때 image sprite를 드래그한 것이 아니라면 (빨간 box)

- 드래그한 만큼 크기 조절용 compnent 크기 변경

- image sprite 드래그하여 위치 변경

3. 실행 화면

4. 프로그램 소스(aia)

canvas_scroll_2020702.aia
0.68MB

 


 

관련글 : 앱인벤터 소개

https://blog.naver.com/sfex/221994450104

[make app] app inventor 소개

 


 

반응형
반응형

python 을 처음 접할 때 설치, 등 여러 가지 문제를 줄이면서 간편하게 빨리 python을 실행해볼 수 있는 것이 google colaboratory입니다.(사용법 : https://ndb796.tistory.com/312 )(제약은 있지만 GPU, TPU 실습도 가능...)

대부분 웹에서 정보를 가져오려고 할 때 beatifulsoup를 이용해서 각 사이트에 맞게 잘라서 가져오는 방법을 주로 사용합니다.

뉴스 형식의 데이터를 가져오는 python newspaper라는 library를 이용하면 어떻게 작업을 쉽게 할 수 있는지 살펴보고자 합니다.

일단 사용법을 살펴보고 블로그 등 일반 사이트에도 적용해서 실습해 보겠습니다.

참고사이트

- https://holwech.github.io/blog/Automatic-news-scraper/

- https://github.com/codelucas/newspaper

실습 내용

- https://colab.research.google.com/drive/13vdr-le3jzjGWpKMbBRkijJ8mfthdU_J?usp=sharing

정리

- newspaper library를 이용해서 간단하게 웹페이지 내용을 가져올 수 있습니다.

- 사용법

from newspaper import Article

url = 'https://news.chosun.com/site/data/html_dir/2020/07/02/2020070204391.html'
article = Article(url)
article.download()
article.parse()
article.nlp()

# 제목
article.title

# 저자
article.authors

# 날짜
article.publish_date

# 내용
article.text

# 주요 이미지
article.top_image

# 동영상
article.movies

# 키워드
article.keywords

# 요약
article.summary

- 네이버 블로그는 잘 안되고, tistory는 잘 작동합니다.


 

반응형
반응형

canvas -> image sprite -> drage 이용하여 단어와 그림을 잇는 게임입니다.

앱인벤터 (한글 화면)에서 작성하였습니다.

http://ai2.appinventor.mit.edu/?locale=ko_KR

 

http://ai2.appinventor.mit.edu/?locale=ko_KR

 

ai2.appinventor.mit.edu


앱 구상

[참고 앱]

https://youtu.be/dkUkH9D1JrY

 

기본기능

1. canvas에 있는 이미지를 드래그하여 움직일 수 있도록 한다.

2. 서로 충돌할 경우 연결된 이미지이면 정답 처리한다.

3. 전체 성공시 축하 메시지와 함께 음성도 출력한다.


앱 제작

1. 화면 디자인

2. 블록 코딩

3. 실행 화면

4. 프로그램 소스

ImageWordGame1.aia
0.36MB


관련 글

앱인벤터 소개

https://blog.naver.com/sfex/221994450104

 

기억 퍼즐게임

https://blog.naver.com/sfex/222011042941

 


 

반응형

+ Recent posts